CSS3之background属性

最新推荐文章于 2024-05-18 00:30:00 发布
最新推荐文章于 2024-05-18 00:30:00 发布
阅读量1.2k 收藏 6
点赞数 1
分类专栏： 前端技术-CSS 文章标签： background 属性  径向 线性 渐变
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ywb88888888/article/details/102718575
版权

background:

作用：
          在一个声明中设置所有的背景属性
说明：
          可以设置的属性分别是：background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment,和background-image，如果上述值缺少一个，这不要紧，例如background：＃FF0000 URL（smiley.gif）;是允许的

background-color:

作用：
          设置一个元素的背景颜色
说明：
          元素的背景是元素的总大小，包括填充和边界 （但不包括边距）
常用值：
          (color)： 指定背景颜色
          (transparent)： 指定背景颜色应该是透明的

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之background属性</title>
    
    <style type="text/css">
        body {
            background: url(img/trees.JPG);
            background-size: cover;
        }
        #showdiv {
            width: 900px;
            height: 900px;
            margin: 10px auto;
        }
        .demodiv {
            margin: 24px;
            width: 400px;
            height: 400px;
            float: left;
            border-radius: 10px;
        }
        #showdiv1 {
            background-color: mediumpurple;
        }
        #showdiv2 {
            background-color: rgba(255, 255, 255, 0.5);
        }
        #showdiv3 {
        
        }
        #showdiv4 {
        
        }
    </style>
</head>
<body>
<div id="showdiv">
    <div id="showdiv1" class="demodiv"></div>
    <div id="showdiv2" class="demodiv"></div>
    <div id="showdiv3" class="demodiv"></div>
    <div id="showdiv4" class="demodiv"></div>
</div>
</body>
</html>

在这里插入图片描述

background-position:

作用：
          设置背景图像的起始位置，默认在容器的左上角
说明：
          在使用此属性之前，先使用background-image属性获得背景，这个工作在Firefox和Opera，background-attachment必须设置为 "fixed （固定）"
语法：
          background-position : length || length 或者 background-position : position || position
注意：
          1.必须先指定background-image属性
          2.position 后面是x坐标 和 y坐标，可以使用方位名词或者精确单位
          3.如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
          4.如果只指定了一个方位名词，另一个值默认居中对齐
          5.如果position后面是精确坐标， 那么第一个是 x ，第二个是y
          6.如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
          7.如果指定的两个值是精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之background属性</title>
    
    <style type="text/css">
        body {
            background: url(img/trees.JPG);
            background-size: cover;
        }
        #showdiv {
            width: 900px;
            height: 900px;
            margin: 10px auto;
        }
        .demodiv {
            margin: 24px;
            width: 400px;
            height: 400px;
            float: left;
            border: 1px solid;
            border-radius: 10px;
            background-image: url(./img/ironMan-square-small.JPG);
            background-repeat: no-repeat;
        }
        #showdiv1 {
            background-position: center center;
        }
        #showdiv2 {
            background-position: -30px 30px;
        }
        #showdiv3 {
            background-position: 0 center;
        }
        #showdiv4 {
            background-position: 50px;
        }
    </style>
</head>
<body>
<div id="showdiv">
    <div id="showdiv1" class="demodiv"></div>
    <div id="showdiv2" class="demodiv"></div>
    <div id="showdiv3" class="demodiv"></div>
    <div id="showdiv4" class="demodiv"></div>
</div>
</body>
</html>

在这里插入图片描述

background-size:

作用：
          指定背景图片大小，默认** 大小
说明：
          在使用此属性之前，先使用background-image属性获得背景**
常用值：
          (NUMBER)： 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为auto (自动)
          (cover)： 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
          (contain)： 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之background属性</title>
    
    <style type="text/css">
        body {
            background: url(img/trees.JPG);
            background-size: cover;
        }
        #showdiv {
            width: 900px;
            height: 900px;
            margin: 10px auto;
        }
        .demodiv {
            margin: 24px;
            width: 400px;
            height: 400px;
            float: left;
            border: 1px solid;
            border-radius: 10px;
            background-image: url(./img/nightsky.JPG);
            background-repeat: no-repeat;
        }
        #showdiv1 {
            background-size: cover;
        }
        #showdiv2 {
            background-size: contain;
        }
        #showdiv3 {
        
        }
        #showdiv4 {
        
        }
    </style>
</head>
<body>
<div id="showdiv">
    <div id="showdiv1" class="demodiv"></div>
    <div id="showdiv2" class="demodiv"></div>
    <div id="showdiv3" class="demodiv"></div>
    <div id="showdiv4" class="demodiv"></div>
</div>
</body>
</html>

在这里插入图片描述

background-repeat:

作用：
          设置如何平铺对象的background-image属性
说明：
          在使用此属性之前，先使用background-image属性获得背景，默认情况 下，重复 background-image的 垂直 和 水平 方向
常用值：
          (repeat)：默认值，背景图像在纵向和横向上平铺
          (no-repeat)： 背景图像不平铺
          (repeat-x)： 背景图像在横向平铺
          (repeat-y)： 背景图像在纵向平铺

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之background属性</title>
    
    <style type="text/css">
        body {
            background: url(img/trees.JPG);
            background-size: cover;
        }
        #showdiv {
            width: 900px;
            height: 900px;
            margin: 10px auto;
        }
        .demodiv {
            margin: 24px;
            width: 400px;
            height: 400px;
            float: left;
            border: 1px solid;
            border-radius: 10px;
            background-image: url(./img/ironMan-square-small.JPG);
        }
        #showdiv1 {
            background-repeat: no-repeat;
        }
        #showdiv2 {
            background-repeat: repeat-x;
        }
        #showdiv3 {
            background-repeat: repeat-y;
        }
        #showdiv4 {

        }
    </style>
</head>
<body>
<div id="showdiv">
    <div id="showdiv1" class="demodiv"></div>
    <div id="showdiv2" class="demodiv"></div>
    <div id="showdiv3" class="demodiv"></div>
    <div id="showdiv4" class="demodiv"></div>
</div>
</body>
</html>

在这里插入图片描述

background-attachment:

作用：
          设置背景图像是否固定或者随着页面的其余部分滚动
说明：
          在使用此属性之前，先使用 background-image属性获得背景
常用值：
          (scroll)：默认值，背景图片随着页面的滚动而滚动 (与使用background属性的元素绑定)
          (fixed)： 背景图片不会随着页面的滚动而滚动 （与body绑定）
          (local)： 背景图片会随着元素内容的滚动而滚动 （与使用background属性的元素中的内容绑定）

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之background属性</title>
    
    <style type="text/css">
        body {
            background: url(img/trees.JPG);
            overflow: auto;
        }
        #showspan {
            color: transparent;
            line-height: 30px;
        }
        #showdiv {
            width: 900px;
            height: 900px;
            margin: 70px auto;
        }
        .demodiv {
            margin: 24px;
            width: 400px;
            height: 400px;
            float: left;
            color: white;
            font: normal bold 16px 宋体;
            letter-spacing: 5px;
            text-align: center;
            line-height: 35px;
            border: 1px solid;
            border-radius: 10px;
            overflow: auto;
            background-repeat: no-repeat;
        }
        #showdiv1 {
            background-image: url(./img/ironMan-square.JPG);
            background-size: cover;
            background-attachment: scroll;
        }
        #showdiv2 {
            background-image: url(./img/ironMan.JPG);
            background-size: cover;
            background-attachment: fixed;
        }
        #showdiv3 {
            background-image: url(./img/ironMan-orthogon.JPG);
            background-size: contain;
            background-attachment: local;
        }
        #showdiv4 {
            display: none;
        }
    </style>
</head>
<body>
    <div id="showdiv">
        <div id="showdiv1" class="demodiv">
            长太息以掩涕兮，哀民生之多艰。<br/>余虽好修姱以鞿羁兮，謇朝谇而夕替。<br/>既替余以蕙纕兮，又申之以揽茝。<br/>亦余心之所善兮，虽九死其犹未悔。<br/>怨灵修之浩荡兮，终不察夫民心。<br/>众女嫉余之蛾眉兮，谣诼谓余以善淫。<br/>固时俗之工巧兮，偭规矩而改错。<br/>背绳墨以追曲兮，竞周容以为度。<br/>忳郁邑余侘傺兮，吾独穷困乎此时也。<br/>宁溘死以流亡兮，余不忍为此态也！<br/>鸷鸟之不群兮，自前世而固然。<br/>何方圜之能周兮？夫孰异道而相安？<br/>屈心而抑志兮，忍尤而攘诟。<br/>伏清白以死直兮，固前圣之所厚。<br/>悔相道之不察兮，延伫乎吾将反。<br/>回朕车以复路兮，及行迷之未远。<br/>步余马于兰皋兮，驰椒丘且焉止息。<br/>进不入以离尤兮，退将复修吾初服。<br/>制芰荷以为衣兮，集芙蓉以为裳。<br/>不吾知其亦已兮，苟余情其信芳。<br/>高余冠之岌岌兮，长余佩之陆离。<br/>芳与泽其杂糅兮，唯昭质其犹未亏。<br/>忽反顾以游目兮，将往观乎四荒。<br/>佩缤纷其繁饰兮，芳菲菲其弥章。<br/>民生各有所乐兮，余独好修以为常。<br/>虽体解吾犹未变兮，岂余心之可惩？<br/>女嬃之婵媛兮，申申其詈予，<br/>曰：“鲧婞直以亡身兮，终然夭乎羽之野。<br/>汝何博謇而好修兮，纷独有此姱节？<br/>薋菉葹以盈室兮，判独离而不服。”<br/>众不可户说兮，孰云察余之中情？<br/>世并举而好朋兮，夫何茕独而不予听？<br/>依前圣以节中兮，喟凭心而历兹。<br/>济沅、湘以南征兮，就重华而敶词：<br/>启《九辩》与《九歌》兮，夏康娱以自纵。<br/>
        </div>
        <div id="showdiv2" class="demodiv">
            长太息以掩涕兮，哀民生之多艰。<br/>余虽好修姱以鞿羁兮，謇朝谇而夕替。<br/>既替余以蕙纕兮，又申之以揽茝。<br/>亦余心之所善兮，虽九死其犹未悔。<br/>怨灵修之浩荡兮，终不察夫民心。<br/>众女嫉余之蛾眉兮，谣诼谓余以善淫。<br/>固时俗之工巧兮，偭规矩而改错。<br/>背绳墨以追曲兮，竞周容以为度。<br/>忳郁邑余侘傺兮，吾独穷困乎此时也。<br/>宁溘死以流亡兮，余不忍为此态也！<br/>鸷鸟之不群兮，自前世而固然。<br/>何方圜之能周兮？夫孰异道而相安？<br/>屈心而抑志兮，忍尤而攘诟。<br/>伏清白以死直兮，固前圣之所厚。<br/>悔相道之不察兮，延伫乎吾将反。<br/>回朕车以复路兮，及行迷之未远。<br/>步余马于兰皋兮，驰椒丘且焉止息。<br/>进不入以离尤兮，退将复修吾初服。<br/>制芰荷以为衣兮，集芙蓉以为裳。<br/>不吾知其亦已兮，苟余情其信芳。<br/>高余冠之岌岌兮，长余佩之陆离。<br/>芳与泽其杂糅兮，唯昭质其犹未亏。<br/>忽反顾以游目兮，将往观乎四荒。<br/>佩缤纷其繁饰兮，芳菲菲其弥章。<br/>民生各有所乐兮，余独好修以为常。<br/>虽体解吾犹未变兮，岂余心之可惩？<br/>女嬃之婵媛兮，申申其詈予，<br/>曰：“鲧婞直以亡身兮，终然夭乎羽之野。<br/>汝何博謇而好修兮，纷独有此姱节？<br/>薋菉葹以盈室兮，判独离而不服。”<br/>众不可户说兮，孰云察余之中情？<br/>世并举而好朋兮，夫何茕独而不予听？<br/>依前圣以节中兮，喟凭心而历兹。<br/>济沅、湘以南征兮，就重华而敶词：<br/>启《九辩》与《九歌》兮，夏康娱以自纵。<br/>
        </div>
        <div id="showdiv3" class="demodiv">
            长太息以掩涕兮，哀民生之多艰。<br/>余虽好修姱以鞿羁兮，謇朝谇而夕替。<br/>既替余以蕙纕兮，又申之以揽茝。<br/>亦余心之所善兮，虽九死其犹未悔。<br/>怨灵修之浩荡兮，终不察夫民心。<br/>众女嫉余之蛾眉兮，谣诼谓余以善淫。<br/>固时俗之工巧兮，偭规矩而改错。<br/>背绳墨以追曲兮，竞周容以为度。<br/>忳郁邑余侘傺兮，吾独穷困乎此时也。<br/>宁溘死以流亡兮，余不忍为此态也！<br/>鸷鸟之不群兮，自前世而固然。<br/>何方圜之能周兮？夫孰异道而相安？<br/>屈心而抑志兮，忍尤而攘诟。<br/>伏清白以死直兮，固前圣之所厚。<br/>悔相道之不察兮，延伫乎吾将反。<br/>回朕车以复路兮，及行迷之未远。<br/>步余马于兰皋兮，驰椒丘且焉止息。<br/>进不入以离尤兮，退将复修吾初服。<br/>制芰荷以为衣兮，集芙蓉以为裳。<br/>不吾知其亦已兮，苟余情其信芳。<br/>高余冠之岌岌兮，长余佩之陆离。<br/>芳与泽其杂糅兮，唯昭质其犹未亏。<br/>忽反顾以游目兮，将往观乎四荒。<br/>佩缤纷其繁饰兮，芳菲菲其弥章。<br/>民生各有所乐兮，余独好修以为常。<br/>虽体解吾犹未变兮，岂余心之可惩？<br/>女嬃之婵媛兮，申申其詈予，<br/>曰：“鲧婞直以亡身兮，终然夭乎羽之野。<br/>汝何博謇而好修兮，纷独有此姱节？<br/>薋菉葹以盈室兮，判独离而不服。”<br/>众不可户说兮，孰云察余之中情？<br/>世并举而好朋兮，夫何茕独而不予听？<br/>依前圣以节中兮，喟凭心而历兹。<br/>济沅、湘以南征兮，就重华而敶词：<br/>启《九辩》与《九歌》兮，夏康娱以自纵。<br/>
        </div>
        <div id="showdiv4" class="demodiv"></div>
        
    </div>
    <span id="showspan">
        余<br/>虽<br/>好<br/>修<br/>姱<br/>以<br/>鞿<br/>羁<br/>兮<br/>，<br/>謇<br/>朝<br/>谇<br/>而<br/>夕<br/>替
    </span>
</body>
</html>

第一个div属性为scroll：
在这里插入图片描述
 
第二个div属性为fixed：

 
第三个div属性为local
在这里插入图片描述
 
第二个div的效果：
在这里插入图片描述

background-image:

作用：
设置一个元素的背景图像
说明：
元素的背景是元素的总大小，包括填充和边界 （但不包括边距），默认情况下，background-image放置 在元素的 左上角，并重复 垂直 和 水平 方向
常用值：
(url(URL))： 图像的URL
(none)：默认值，无图像背景会显示
关于渐变详见：这里！！！

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之background属性</title>
    
    <style type="text/css">
        #showdiv {
            width: 400px;
            height: 400px;
            margin: 100px auto;
            background-image: url(img/globe2.JPG);
            background-size: cover;
        }
    </style>
</head>
<body>
    <div id="showdiv"></div>
</body>
</html>

在这里插入图片描述
渐变，代码示例：

<!DOCTYPE html>
<!--
    基本语法格式：
        线性渐变：linear-gradient(方向, 起始颜色, 终止颜色);
        径向渐变：radial-gradient(渐变形状 渐变半径 渐变中心点, color1, color2, ...);
-->
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>CSS3之background属性</title>
	
	<style type="text/css">
		.show {
			margin: 20px 0 20px 0;
			height: 150px;
			border: 1px solid gray;
		}
		.show1 {
			display: inline-block;
			margin: 5px;
			height: 150px;
			width: 195px;
			border: 1px solid gray;
		}
		
		/* 线性渐变 */
		#showdiv1 {
			/* 默认从上到下渐变 */
			background: linear-gradient(red, blue);
		}
		#showdiv2 {
			/* 向右渐变 */
			background: linear-gradient(to right, red, blue);
		}
		#showdiv3 {
			/* 向右下渐变 */
			background: linear-gradient(to bottom right, red, yellowgreen);
		}
		#showdiv4 {
			/* 自定义角度渐变 角度是指水平线和渐变线之间的角度，逆时针方向计算 */
			/*请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度*/
			background: linear-gradient(170deg, red, blue);
		}
		#showdiv5 {
			/* 多个颜色结点 */
			background: linear-gradient(60deg, red, orange, yellow, green, cyan, blue, purple);
		}
		#showdiv6 {
			/* 多个颜色结点 */
			background: linear-gradient(to right, rgba(255, 0, 0, 0.3), rgba(0, 255, 0, 0.3));
		}
		#showdiv7 {
			/* 重复多个颜色结点 */
			background: repeating-linear-gradient(red, orange 10%, green 20%, yellow 10%);
		}
		
		/* 径向渐变 */
		#showdiv8 {
			/* 基本径向渐变，椭圆形，向最远的角，在图形中心点 */
			background: radial-gradient(red, orange, yellow, green, cyan, blue, purple);
		}
		#showdiv9 {
			/* 圆形径向渐变，指定径向渐变的半径长度为从圆心到离圆心最远的角，在图形中心点 */
			background: radial-gradient(circle, red, orange, yellow, green, cyan, blue, purple);
		}
		#showdiv10 {
			/* 圆形径向渐变，指定径向渐变的半径长度为从圆心到离圆心最近的边，在图形中心点 */
			background: radial-gradient(circle closest-side, red, orange, yellow, green, cyan, blue, purple);
		}
		#showdiv11 {
			/* 椭圆形径向渐变，指定径向渐变的半径长度为从圆心到离圆心最近的角 */
			background: radial-gradient(ellipse closest-corner, red, orange, yellow, green, cyan, blue, purple);
		}
		#showdiv12 {
			/* 椭圆形径向渐变，指定径向渐变的半径长度为从圆心到离圆心最远的边 */
			background: radial-gradient(circle farthest-side, red, orange, yellow, green, cyan, blue, purple);
		}
		#showdiv13 {
			/* 圆形径向渐变，中心点位置改变 */
			background: radial-gradient(circle farthest-side at bottom, red, orange, yellow, green, cyan, blue, purple);
		}
		#showdiv14 {
			/* 多重圆形径向渐变，中心点位置改变 */
			background: repeating-radial-gradient(red, yellow 15%, green 25%);
		}
		#showdiv14 {
			/* 多重圆形径向渐变，中心点位置改变 */
			background: repeating-radial-gradient(red, yellow 15%, green 25%);
		}
		
		/* 渐变字体需要设置以下三个属性，但是兼容问题有待解决,!important并非必要，视具体情况而定 */
		span {
			display: block;
			text-align: center;
			font: normal 400 200px/400px "Microsoft JhengHei UI Light";
			color: transparent;
			-webkit-background-clip: text;
			background-image: radial-gradient(#FE8537, #2AD396, #85BB1F, #00C2AB, #3E94FF, #45CAFF, #1471FB);
		}
	</style>
</head>
<body>
	<div id="showdiv1" class="show"></div>
	<div id="showdiv2" class="show"></div>
	<div id="showdiv3" class="show"></div>
	<div id="showdiv4" class="show"></div>
	<div id="showdiv5" class="show"></div>
	<div id="showdiv6" class="show"></div>
	<div id="showdiv7" class="show"></div>
	<div id="showdiv8" class="show1"></div>
	<div id="showdiv9" class="show1"></div>
	<div id="showdiv10" class="show1"></div>
	<div id="showdiv11" class="show1"></div>
	<div id="showdiv12" class="show1"></div>
	<div id="showdiv13" class="show1"></div>
	<div id="showdiv14" class="show1"></div>
	<hr>
	<span>Iphone XS</span>
</body>
</html>

在这里插入图片描述

Programmer.杨
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css3中的border和background属性
qq_41938120的博客
03-16 1095
border border是一个组合属性，它有四个值，每个值代表一个方向，每个方向都有宽度，线条样式和颜色 div{ width: 100px; height: 100px; border: 5px solid black; border-left: 5px solid red; border-right: 5px dashed blue; bord...
CSS background背景属性
weixin_58139900的博客
10-05 291
目录 多个背景图像background-image background-origin背景图像的起始点 background-clip背景绘制区域 background-size背景图像的大小 合并简写 兼容 ​ CSS3背景渐变 线性渐变 径向渐变(了解) 概述：CSS3更新增了新的背景属性，提供对元素背景更灵活的控制 多个背景图像background-image CSS3中可以通过background-image给元素上添加多个背景图像 语法 不同的背景图像和图像用【.
Css3——background属性详解
盏茶作酒的博客
09-26 1763
Css3——background属性详解 background：背景。在css里面作为css属性一成员，通过该属性可设置背景图片、背景颜色、背景图片截取等样式。而仅仅一个background又具有多个子属性。 background-color background-image background-repeat background-attachment background-position ...
CSS3中background属性的调整
weixin_33743880的博客
04-02 219
       CSS3对于background做了一些修改，最明显的一个就是采用设置多背景，不但添加了4个新属性，并且还对目前的属性进行了调整增强。     1、多个背景图片     在css3里面，你可以再一个标签元素里应用多个背景图片。代码类似与css2.0版本的写法，但引用图片之间需用“，”逗号隔开。第一个图片是定位在元素最上面的背景，后面的背景图片依次在它下面显示，如下：     b...
CSS3 背景属性详解
最新发布
大剑师兰特的GIS世界
05-18 833
CSS3对背景属性进行了扩展，提供了更强大的背景处理能力，包括但不限于多重背景、背景尺寸、背景渐变等。
CSS 之 background 系列属性详解
热门推荐
weixin_45092437的博客
03-09 3万+
背景系列属性，共包含9种属性：background-color：设置元素的背景颜色。background-image：设置元素的背景图片。background-size：设置元素背景图片的大小。background-position：设置元素背景图片的位置。background-repeat：设置背景图片是否重复，以及如何重复。background-clip：设置元素背景的渲染区域。background-origin：设置元素背景的定位区域。background-attachment：设置元素的背景图片是否
【Web前端学习笔记】-CSS3-背景属性(background)
weixin_46681936的博客
04-26 742
学习了CSS3中有关背景属性的五大知识点，包括：颜色 background-color图片 background-image图片大小 background-size图片位置 background-position图片填充方式 background-repeat。
Backgrounds(背景）
weixin_30642561的博客
12-04 376
值说明CSS background-color 指定要使用的背景颜色 1 background-position 指定背景图像的位置 1 background-size 指定背景图片的大小 3 background-repeat 指定如何重复背景图像 1 background-origin 指定背景图像的定位区域 3 ...
css3 background属性调整增强介绍
09-25
在CSS3中，`background`属性得到了显著的增强和扩展，允许开发者更加精细地控制元素的背景样式。这里我们将详细探讨这些新增和调整的特性。 首先，CSS3引入了**多背景图片**的支持，这意味着一个元素可以有多个背景...
CSS3属性background-size使用指南
09-25
主要介绍了CSS3属性background-size使用指南,需要的朋友可以参考下
CSS的background属性及CSS3的背景图片设置总结
09-24
CSS3进一步扩展了这个属性，添加了`background-clip`、`background-origin`和`background-size`这三个新的特性，提供了更精细的背景控制。 首先，`background-color`属性用于设置元素的背景颜色，可以是颜色名称、...
CSS3之多背景background使用示例
09-25
对于不支持CSS3的旧版浏览器，多背景属性将被忽略，但不会影响到其他CSS2样式的表现。 ### 三、背景的实例 #### 1. 圆角效果 以下例子展示了如何使用多背景创建一个带有圆角的自定义边框效果： ```css .a { width...
CSS的style="background-image
ouyang_ouba的博客
04-20 4142
style="background-image: url(/statics/images/47fb3c_.jpg);" 其中url里边的路径需要以“/”开头，不然静态资源在某些情况下无法访问。
CSS3属性之background
桃花扇的博客
03-26 504
喜欢C3的内容，因为终于可以做炫酷的网页了！！！废话不多说上干货~~~ 一、border 1.border-radius border-radius这个属性在学习CSS2的时候也经常使用，现在对它进行拆分，先来做一个正方形如下，然后看看我们在CSS2中是怎么用的吧 （1）不做拆分 【例1】四角统一设置一个参数 <!DOCTYPE html> <html lang...
css3 background背景属性
weixin_44992737的博客
08-10 562
css背景属性
background的属性和背景图片定位的实例
08-20 729
本文内容： 　　1.背景图片定位示例 　　2.background常用的属性值 　　3.background-repeat新增的round、space属性 　　4.background-size的属性值（着重介绍contain、cover） 　　5.background-origin属性值（borde-box、padding-box、content-box） 　　6.多背景图...
CSS设置背景颜色为透明
读心悦
01-17 2万+
background-color:transparent;
CSS3 之 background
weixin_43051270的博客
05-26 119
1. background-image 引用 background-image: url( xxx.jpg ) 可以引用多个元素 background-image: url( xxx.jpg ) ,url(xxx.png) 一个容器引用多张图片是在 css3 新增的一种功能，引用多张图片后，需要调整各自元素的位置，否则元素会重叠在一起。（在规范情况下很少使用！！！）一般在图片容错机制下...
CSS中背景图片的background-position中的left top到底是相对于谁的？
weixin_30432007的博客
07-31 185
在学习的时候遇到了如下问题： CSS中背景图片的background-position中的left top到底是相对于谁的，content-box?padding-box?border-box? background属性中的backgound-image和background-color相对的box是一致的吗？ 如何做到背景图片位于容器的右边10px,底边10px？ ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值