CSS3背景技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/bao990423420/article/details/14126767

CSS3 背景

CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制

background-size

<!DOCTYPE html>
<html>
<head>
  
   <title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style> 



body
{
background:url(bg.jpg);
background-size:150px 100px;
background-repeat:no-repeat;
padding-top:80px;
}
}
</style>
</head>


<body>

<p>上面是缩小的背景图片。</p>

<p>原始图片：<img src="bg.jpg" alt="Flowers"></p>


</body>
</html>

CSS3 background-origin 属性

background-origin 属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

<!DOCTYPE html>
<html>
<head>
  
   <title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style> 

div
{
border:1px solid black;
padding:35px;
background-image:url('bg.jpg');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:padding-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>


<body>
<p>background-origin:border-box:</p>
<div id="div1">
内容 内容 内容 内容 内容 内容 内容 内容内容 内容内容 内容内容 内容。
</div>

<p>background-origin:content-box:</p>
<div id="div2">
内容 内容 内容 内容 内容 内容内容 内容内容 内容 内容 内容内容 内容 。
</div>

</body>
</html>

CSS3 多重背景图片

CSS3 允许您为元素使用多个背景图像。

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
background-image:url(bg.jpg),url(bg.jpg);
}
</style>
</head>
<body>

</body>
</html>

CSS3 (三) 背景

CSS3 背景

CSS3 background-origin 属性

CSS3 多重背景图片