您的位置：首页 > Web前端 > CSS

CSS(3) Background（背景）

2016-06-19 16:01 701 查看
一、CSS 背景

1、CSS 背景属性用于定义HTML元素的背景。CSS 属性定义背景效果:

background-color

background-image

background-repeat

background-attachment

background-position

2、背景颜色

background-color 属性定义了元素的背景颜色.页面的背景颜色使用在body的选择器中:

body {background-color:#b0c4de;}

CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"

RGB - 如："rgb(255,0,0)"

颜色名称 - 如："red"

以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:

h1 {background-color:#6495ed;}

p {background-color:#e0ffff;}

div {background-color:#b0c4de;}

3、背景图像

background-image 属性描述了元素的背景图像.默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.页面背景图片设置实例:

body {background-image:url('paper.gif');}

下面是一个例子是一个糟糕的文字和背景图像组合。文本可读性差:

body {background-image:url('bgdesert.jpg');}

4、背景图像 - 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('gradient2.png');
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>




如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>



5、背景图像- 设置定位与不平铺

Remark 让背景图像不影响文本的排版如果你不想让图像平铺，你可以使用 background-repeat 属性:

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
</body>
</html>




以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。可以利用 background-position 属性改变图像在背景中的位置:

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>背景图片不重复，设置 position 实例。</p>
<p>背景图片只显示一次，并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>
</html>



6、背景图像-固定或者滚动

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。scroll：背景图片随页面的其余部分滚动。这是默认；fixed：背景图像是固定的；inherit：指定background-attachment的设置应该从父元素继承

7、背景- 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.背景颜色的简写属性为 "background":

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:#ffffff url('img_tree.png') no-repeat right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Now the background image is only shown once, and it is also positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so that the background image will not disturb the text.</p>
</body>




当使用简写属性时，属性值的顺序为：:

background-color

background-image

background-repeat

background-attachment

background-position

二、CSS3 背景

1、背景层的混合模式

background-blend-mode 属性定义了背景层的混合模式（图片与颜色）。CSS 语法background-blend-mode:normal|multiply|screen|overlay|darken|

lighten|color-dodge|saturation|color|luminosity;

normal：默认值。设置正常的混合模式。

multiply：正片叠底模式。

screen：滤色模式。

overlay：叠加模式。

darken ：变暗模式。

lighten：变亮模式。

color-dodge：颜色减淡模式。

saturation：饱和度模式。

color：颜色模式。

luminosity：亮度模式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body  {background-color: yellow;}
div {
width: 290px;
height: 69px;
background-size: 290px 69px;
background-repeat:no-repeat;
background-image: linear-gradient(to right, green 0%,white 100%), url('logo.png');
background-blend-mode: color-dodge;
}
</style>
</head>
<body>
<div></div>
<p><b>注意:</b> Internet Explorer 不支持 background-blend-mode 属性。</p>
</body>
</html>



2、背景绘制区域

background-clip属性指定背景绘制区域。语法background-clip: border-box|padding-box|content-box;

border-box：默认值。背景绘制在边框方框内（剪切成边框方框）。

padding-box：背景绘制在衬距方框内（剪切成衬距方框）。

content-box：背景绘制在内容方框内（剪切成内容方框）。

<html><!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:300px;
padding:50px;
background-color:yellow;
background-clip:content-box;
border:2px solid #92b901;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit。
</div>
</body>
</html>




3、背景图片的内容框相对定位

background-Origin属性指定background-position属性应该是相对位置。注意如果背景图像background-attachment是"固定"，这个属性没有任何效果。语法：background-origin:
padding-box|border-box|content-box;

padding-box：背景图像填充框的相对位置

border-box：背景图像边界框的相对位置

content-box：背景图像的相对位置的内容框

<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:1px solid black;
padding:35px;
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>
<p>background-origin:border-box:</p>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<p>background-origin:content-box:</p>
<div id="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>




4、背景图片大小

background-size属性指定背景图片大小。语法background-size: length|percentage|cover|contain;

length：设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"atuo(自动)"。

percentage：将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"。

cover：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

contain：此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航