【前端】【html/css】前端学习之路（七）：CSS背景（background）

最新推荐文章于 2023-12-19 10:34:10 发布

SuiKaSan

最新推荐文章于 2023-12-19 10:34:10 发布

阅读量299

点赞数

分类专栏：前端文章标签：自学前端 html/css

本文链接：https://blog.csdn.net/yongqianbao4519/article/details/80757537

版权

前端专栏收录该内容

28 篇文章 2 订阅

订阅专栏

CSS背景（background）

CSS 可以添加背景颜色和背景图片，以及来进行图片设置。

1.背景图片（image）

语法：

background-image : none | url (url)

参数：

none : 　无背景图（默认的）

url : 　使用绝对或相对地址指定背景图像

background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。如果有背景图片平铺，则会覆盖背景颜色。

小技巧：我们提倡背景图片后面的地址，url不要加引号。

2.背景平铺（repeat）

语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

参数：

repeat : 　背景图像在纵向和横向上平铺（默认的）

no-repeat : 　背景图像不平铺

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

3.背景位置（position）

语法：

background-position : length || length

background-position : position || position

参数：

length : 　百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位

position : 　top | center | bottom | left | right

说明：

设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%，也就是居中。第二个值将用于纵坐标。

注意：

position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。

实际工作用的最多的，就是背景图片居中对齐了。

这个属性有点容易混，示例如下：

（1）position:center center

图片居中：

        div {
            width: 500px;
            height: 500px;
            background-image: url(images/3.jpg);
            background-color: red;
            background-repeat: no-repeat;
            background-position: center center;
        }

图片居于右下角：

    <style>
        div {
            width: 500px;
            height: 500px;
            background-image: url(images/3.jpg);
            background-color: red;
            background-repeat: no-repeat;
            background-position: right bottom;
        }
    </style>

（2）positon:px px

    <style>
        div {
            width: 500px;
            height: 500px;
            background-image: url(images/3.jpg);
            background-color: red;
            background-repeat: no-repeat;
            background-position: 50px 50px;
        }
    </style>

（3）两者混用

    <style>
        div {
            width: 500px;
            height: 500px;
            background-image: url(images/3.jpg);
            background-color: red;
            background-repeat: no-repeat;
            background-position: 100px top ;
        }
    </style>

4.背景附着（attachment）

语法：

background-attachment : scroll | fixed

参数：

scroll : 　背景图像是随对象内容滚动

fixed : 　背景图像固定

说明：

设置或检索背景图像是随对象内容滚动还是固定的。

比如在网页中写超过一页的文字或内容，当你向下滚动时，如果设定fixed，则背景不会随着文字内容一起滚动，若选择scroll，则背景会随着文字内容一起滚动，默认为scroll。

5.背景简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：

background:背景颜色背景图片地址背景平铺背景滚动背景位置

background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

6.案例1（魔兽背景）

    <style>
        body{
            /*background-image: url(images/sm.jpg);*/
            /*!*将背景图片置于居中置顶的位置，以适应不同电脑的分辨率*!*/
            /*background-position: center top;*/
            /*background-attachment: scroll;*/
            /*background-repeat: no-repeat;*/
            /*!*为了让背景图片结束之后仍让可以下拉（只要有内容）*!*/
            /*background-color: #000;*/
            /*color: #ffffff;*/


            /*但所有的形式可以简写为以下形式*/

            /*background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置*/


            background: #000 url(images/sm.jpg) no-repeat fixed  center top ;

        }
    </style>

<body>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>
<p>dasdadasdsa</p>

效果：

7.案例2（购物车）

要求：

现有图片样式：，要求是做出鼠标移开时显示：，鼠标点击到时显示：

思路：

设置一个长方形，与登录和购物车图标一样大小的div盒子，并且以该图片为背景，但只显示购物车部分，也就是使用position属性来调节位置使得购物车显示在上，然后当hover时调整背景图片的position属性，使得登录部分显示在上即可。

代码：

    <style>
        a {
            width: 67px;
            height: 32px;
            /*将a这个行内元素转换为块级元素使得其宽高属性可以调节*/
            display: block;
            /*如果不设置position属性，则背景图片默认在左上角，正好复合我们的要求，此时不需再改*/
            background-image: url(images/110.png);
        }
        a:hover {
            background-position: left bottom;
        }
    </style>

<a href="#"></a>

显示效果：鼠标触碰：

8.背景透明（CSS3）

CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,0.3);

前三个参数分别代表red，green，blue，用于调节盒子的颜色，而最后一个参数是alpha，也就是透明度，其取值范围 0~1之间，使用时个位数的0可以省略。

使用该属性后就可以不使用background-color属性了，因为该属性已经被包含与rgba属性中了。

注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

SuiKaSan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【前端】【html/css】前端学习之路（七）：CSS背景（background）

CSS背景（background）CSS 可以添加背景颜色和背景图片，以及来进行图片设置。1.背景图片（image）语法： background-image : none | url (url) none : 　无背景图（默认的）参数： url : 　使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 bac...
复制链接

扫一扫