css background 属性

时间 2019-11-07

标签 css background 属性栏目 CSS 繁體版

原文原文链接

#css background 属性#css

标签订义及使用说明bash

背景缩写属性能够在一个声明中设置全部的背景属性。微信

能够设置的属性分别是：dom

background-color 指定要使用的背景颜色
background-position 指定背景图像的位置
background-size 指定背景图片的大小
background-image 指定要使用的一个或多个背景图像
background-repeat 指定如何重背景图像
background-origin 指定背景图像的定位区域
background-clip 指定背景图像的绘画区域
background-attachment 设置背景图像是否固定或者随着页面的其他部分滚动

实例url

在一个div元素中设置多个背景图像：spa

<body>
	<div class="dome"></div>
</body>

复制代码

css3d

.dome{
         width: 500px;
         height: 500px;
         margin: 0 auto;
         background: #cccccc url(images/history.jpg) no-repeat ;
         }

复制代码

图为：code

##background-position 属性##cdn

如何定位background-image：blog

<body>
	<div class="dome"></div>
</body>

复制代码

css：

.dome{
         width: 500px;
         height: 500px;
         margin: 0 auto;
         background: #cccccc url(images/history.jpg) no-repeat ;

		 background-position: 25px 100px;
         }

复制代码

图为：

##标签订义及使用说明##

background-position属性设置背景图像的起始位置。

属性值

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y% 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。默认值为：0％0％

background-size 属性##

指定背景图像的大小：

<body>
	<div class="dome"></div>
</body>

复制代码

css：

.dome{
         width: 500px;
         height: 500px;
         margin: 0 auto;
         background: #cccccc url(images/history.jpg) no-repeat ;

		 background-position: 50% 50%;
         background-size: 250px 250px;
         }

复制代码

图为：

标签订义及使用说明

background-size属性指定背景图片大小。

语法

background-size: length|percentage|cover|contain;

length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。若是只给出一个值，第二个是设置为 auto(自动)
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。若是只给出一个值，第二个是设置为"auto(自动)"
cover 此时会保持图像的纵横比并将图像缩放成将彻底覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

若是，您认为阅读这篇博客让你有些收获，请您关注一下。感谢您的支持，若有不足，请多指教。

联系方式：

微信号：bsl521921