属性呀呀呀呀"/>
CSS3的background属性呀呀呀呀
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="">
<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="">
<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>运行结果：
更多推荐
CSS3的background属性呀呀呀呀
发布评论