CSS3（background）背景属性

CSS（background）背景属性CSS（background）背景属性与文字阴影
- 背景简写顺序；
- background-color
- background-image
- 背景图像 - 水平或垂直平铺
- background-repeat 设置定位与不平铺
- background-attachment
- background-size。
- 小练习精灵图拼出一个love
文字阴影
- 先看效果吧,可查看注释不同效果。

CSS（background）背景属性CSS（background）背景属性与文字阴影

背景简写顺序；

background-color

background-image
background-repeat
background-attachment
background-position/ [ background-size]

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

background-color

background-color 属性定义了元素的背景颜色.

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

十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

background-image

background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

页面背景图片设置实例:

<style>
body
{background-image:url('paper.gif');background-color:#cccccc;
}
</style>
</head><body>
<h1>Hello World!</h1>
</body>

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

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:

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

如果图像只在水平方向平铺 (repeat-x)

body
{background-image:url('gradient2.png');
background-repeat:repeat-x;
}

如果图像只在垂直方向平铺 (repeat-y)

body
{background-image:url('gradient2.png');
background-repeat:repeat-y;
}

background-repeat 设置定位与不平铺

让背景图像不影响文本的排版

如果你不想让图像平铺，你可以使用 background-repeat 属性:

body
{background-image:url('img_tree.png');
background-repeat:no-repeat;
}

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

可以利用 background-position 属性改变图像在背景中的位置:

body
{background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

background-attachment

background-attachment：如何指定一个固定的背景图像：

body
{ background-image:url('smiley.gif');background-repeat:no-repeat;background-attachment:fixed;
}

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。
initial	设置该属性的默认值。
inherit	指定 background-attachment 的设置应该从父元素继承。

background-size。

指定背景图像的大小：

数值
百分数
cover,铺满盒子，背景图片失真。
contain 等比例缩放图片，不会失真，但肯不会铺满盒子。

div
{   width:600px;height:200px;background:url(img_flwr.gif);background-size:80px 60px;background-repeat:no-repeat;border:2px solid red;
}

div{background-size:80px;只写一个值，代表背景图片宽度80px，背景图片高度自适应。background-size:80px 60px;背景图片宽度80px，背景图片高度60px。background-size:100%;一个百分数，表示高度，宽度都为盒子的宽高。background-size:10% 20%;2个百分数，表示背景宽度为盒子宽度的10%，高度为盒子高度的20%。background-size:cover;背景图片铺满div。但是图片大小会失真。background-size:contain;背景图片不会铺满,大小会自动缩放。
}

小练习精灵图拼出一个love

图片如下

代码如下：


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* div{background-image: url("img/bc1.jpg");width: 900px;height: 900px;background-color: rosybrown;background-repeat: no-repeat;} */div{float: left;}div:nth-child(1) {width: 80px;height: 180px;background: url(img/字母.jpg) no-repeat -550px -253px;}div:nth-child(2) {width: 120px;height: 180px;background: url(img/字母.jpg) no-repeat -142px -461px;}div:nth-child(3) {width: 120px;height: 180px;background: url(img/字母.jpg) no-repeat -250px -660px;}div:nth-child(4) {width: 120px;height: 180px;background: url(img/字母.jpg) no-repeat -600px -73px;}</style>
</head><body><!-- background 综合写法：color image repeat attachment positionbackground:red url("img/bs.jpg") no-repeat fixed 100px 200px;--><div></div><div></div><div></div><div></div>
</body></html>

文字阴影

text-shadow
为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。

先看效果吧,可查看注释不同效果。

     <style>p {font-size: 32px;/* text-shadow: 1px 1px 2px pink; *//* text-shadow: #FC0 1px 0 10px; *//* text-shadow: 5px 5px #558ABB; *//* text-shadow: red 2px 5px; *//* text-shadow: 5px 10px; */text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;}</style><p>测试多重模糊文字阴影效果</p>

当阴影大于一个时要用逗号区别开阴影之间的参数。
三个参数

第一个水平位移量，正数阴影向右，负数向左。
第二个垂直位移量，正数阴影向下，负数向上。
第三个时阴影模糊度。如果没有指定，则默认为0。值越大，模糊半径越大，阴影也就越大越淡。
第四个颜色。

当所给的阴影大于一个时，阴影应用的顺序为从前到后, 第一个指定的阴影在顶部.

CSS3（background）背景属性与文字阴影相关推荐

黑色白色文字阴影HTML,利用css3的text-shadow属性实现文字阴影乳白效果
现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...
background 背景属性详解
background 背景属性我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...
Background背景属性
Background背景属性背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等 1.背景颜色源代码 background-color:颜色值; ...
【前端小点】CSS之background背景属性详解
本篇文章我们将一起展开来看css的background背景属性. 一.结构创建DIV <div class="div1">1 </div> 样式 widt ...
（17）css3新增背景属性
一.背景半透明 CSS3支持背景半透明的写法,颜色值增加了一种 rgba 模式. rgba 模式:在 rgb基础上增加了一个不透明度的设置,不透明度 alpha 取值范围在 0-1 之间,0 表示完全 ...
（15）css常用样式—background背景属性
一.背景属性概述 CSS 中除了布局类属性,还需要添加一些背景类的内容进行页面的修饰,从而让网页变得更加的美观. CSS 中通过 background 属性来设置背景,它是一个综合属性,可以拆分成多 ...
CSS 中的 background 背景属性命令大全
1.background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动. 属性值说明 scroll 背景图片随页面的其余部分滚动.这是默认 fixed 背景图像是固定的 in ...
background 背景属性的简写
通常使用background 属性都是如下写法: background: url(../images/stock_taking/branch.png) no-repeat right bottom ...
css3之背景属性之background-size
一.相关属性: background-image: url("./img/a.jpg"); //设置元素背景图片 background-repeat: repeat/no-repe ...

CSS3（background）背景属性与文字阴影

CSS3（background）背景属性

CSS（background）背景属性CSS（background）背景属性与文字阴影

背景简写顺序；

background-color

background-image

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

background-repeat 设置定位与不平铺

background-attachment

background-size。

小练习精灵图拼出一个love

文字阴影

先看效果吧,可查看注释不同效果。

CSS3（background）背景属性与文字阴影相关推荐

最新文章

热门文章

CSS3（background）背景属性与文字阴影

CSS3（background）背景属性

CSS（background）背景属性CSS（background）背景属性与文字阴影

背景简写顺序；

background-color

background-image

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

background-repeat 设置定位与不平铺

background-attachment

background-size。

小练习 精灵图拼出一个love

文字阴影

先看效果吧,可查看注释不同效果。

CSS3（background）背景属性与文字阴影相关推荐

最新文章

热门文章

小练习精灵图拼出一个love