CSS3的background屬性

deqi525發表於2020-11-19
CSSS3

background-image屬性

background-image 屬性會在元素的背景中設定一個影像。

根據 background-repeat 屬性的值，影像可以無限平鋪、沿著某個軸（x 軸或 y 軸）平鋪，或者根本不平鋪。

初始背景影像（原影像）根據 background-position 屬性的值放置。

CSS3 background-size 屬性

/*指定的大小是相對於父元素的寬度和高度的百分比的大小*/
background-size:80px 60px;
/*伸展背景影像完全填充內容區域*/
background-size:100% 100%;

例項

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="資料庫操作.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        #example1
        {
            background-image:url(C:/Users/deqi5/Desktop/3.jpg);
            background-position:right;
            background-size:100% 100%;
            background-repeat:no-repeat; 
            padding:15px;/*top right bottom left*/
            width:200px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">

<div id="example1">
<h1>Follow</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
       
    </form>
</body>
</html>

執行結果：
在這裡插入圖片描述

background-origin 屬性

background-origin 屬性指定了背景影像的位置區域。

content-box, padding-box,和 border-box區域內可以放置背景影像。
如

background-clip:content-box;

表示從指定位置開始繪製，

例項

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="資料庫操作.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        #example1
        {
            border:10px dashed/*一系列方頭虛線*/ black;
            padding:35px;
            background-color:deeppink;
            
        }
        #example2
        {
            border:10px dotted black;
            padding:35px;
            background-color:peachpuff;
            background-clip:content-box;
        }
          #example3
        {
            border:10px dotted black;
            padding:35px;
            background-color:rosybrown;
            background-clip:padding-box;
        }
          
    </style>
</head>
<body>
    <form id="form1" runat="server">

<div id="example1">
<h1>Follow</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
    <div id="example2">
<h1>Follow</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
        <div id="example3">
<h1>Follow</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
    </form>
</body>
</html>

執行結果：
在這裡插入圖片描述

相關文章