更易操作的网页细节—background背景

最新推荐文章于 2024-10-03 09:02:12 发布

weixin_33966095

最新推荐文章于 2024-10-03 09:02:12 发布

阅读量77

点赞数

文章标签： python

原文链接：https://my.oschina.net/zhouhang0907/blog/530308

版权

2019独角兽企业重金招聘Python工程师标准>>>

多背景图片，你可以在一个标签元素里应用多个背景图片，代码类似于css2.0版本写法，但饮引用图片之间需用“，”逗号隔开。第一个图片是定位元素最上面的背景，后面的背景依次放在它下面显示，如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{width:1200px; height:700px; border:solid red 3px; background:url(images/1.jpg) no-repeat, url(images/2.jpg) no-repeat; }

</style>

</head>

<body>
    <div class="box"></div>
</body>
</html>

background-clip :规定背景的绘制区域（border-box背景被裁剪到边框盒，padding-box背景被裁剪到內边距框，conter-box背景被裁剪到内容框）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{width:600px; height:400px; border: dashed 30px red; padding:50px; background:url(images/1.jpg); background-clip:padding-box; }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

background-orgin规定背景图片的定位区域

此属性需要与background-pasition配合使用，你可以用background-position计算定位是从border、padding或content内容区域算起。

background-size 规定背景图片的尺寸

background-size：contain 让背景图片适应边框，以小的编剧为主进行填充，图片完整

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{width:600px; height:600px; border: solid 3px red; background:url(images/2.jpg) no-repeat; background-size:contain; }     /*可以换成cover或100px 100px或50% 100%*/
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

background-size：cover 背景图片填充边框，以长的边距为准，多余的部分会被裁剪掉，图片可能不完整。

background-size：100px 100px 背景图片被缩放到这个大小

background-size：50% 100%背景图片按照这个比例缩放大小

转载于:https://my.oschina.net/zhouhang0907/blog/530308