css3新样式之背景

Posted 2021-04-09 清美数字

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3新样式之背景相关的知识，希望对你有一定的参考价值。

background-size属性

background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。

CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。

你可以指定像素或百分比大小。

你指定的大小是相对于父元素的宽度和高度的百分比的大小。

实例：

<!DOCTYPE html>

<html>

<head>

<title>测试背景大小</title>

#pp{

width: 300px;

height: 300px;

background-image: url(img/104.jpg);/*背景图*/

background-repeat: no-repeat;/*背景不重复*/

background-size: 100% 100%;

}

</style>

</head>

<body>

</body>

</html>

运行效果：

background-origin属性

background-Origin属性指定了背景图像的位置区域。

content-box, padding-box（默认值）,和 border-box区域内可以放置背景图像。

注意：如果背景图像background-attachment是固定的，这个属性没有任何效果。

实例：

<!DOCTYPE html>

<html>

<head>

div{

border: 30px dotted aqua ;

padding: 50px;

margin: 3px;

background: url(img/104.jpg) no-repeat;

}

#bb{background-origin: content-box;}/*相对于内容*/

#cc{background-origin: padding-box;}/*相对于填充，默认*/

#dd{background-origin: border-box;}/*相对于边框*/

</style>

</head>

<body>

到清美，学技术！<br>

</div>

background-origin: content-box;<br>

到清美，学技术！<br>

</div>

background-origin: padding-box;<br>

到清美，学技术！<br>

</div>

background-origin: border-box;<br>

到清美，学技术！<br>

</div>

</body>

</html>

运行效果：

background-clip属性

CSS3中background-clip背景剪裁属性是从指定位置开始绘制。

语法：

background-clip:border-box|padding-box|content-box;

其中border-box是默认值。

实例：

<!DOCTYPE html>

<html>

<head>

div{

border: 30px dotted aqua ;

width: 400px;

padding: 50px;

margin: 3px;

background: yellow url(img/104.jpg) no-repeat;

}

#bb{background-clip: content-box;}/* 相对于内容 */

#cc{background-clip: padding-box;}/* 相对于填充 */

#dd{background-clip: border-box;}/* 相对于边框，默认 */

</style>

</head>

<body>

到清美，学技术！<br>

</div>

background-clip: content-box;<br>

到清美，学技术！<br>

</div>

background-clip: padding-box;<br>

到清美，学技术！<br>

</div>

background-clip: border-box;<br>

到清美，学技术！<br>

</div>

</body>

</html>

运行结果：

css3多个背景图像

css3中背景可以是多个图像

不同的背景图像用逗号隔开，第一个图片显示在最顶端。

实例：

<!DOCTYPE html>

<html>

<head>

#dd{

width: 500px;

height: 300px;

background: url(img/hua.jpg) left top /20% no-repeat, url(img/bg.jpg);

padding-left: 130px;

}

</style>

</head>

<body>

教育创造未来，知识改变命运！<br>

</div>

</body>

</html>

运行效果：

往期精选

一、

二、

三、

觉得不错请给我一个“在看”

以上是关于css3新样式之背景的主要内容，如果未能解决你的问题，请参考以下文章