CSS3的background属性呀呀呀呀

本文主要是介绍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="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>