前端——css 背景background

最新推荐文章于 2025-05-15 12:42:43 发布

大神，起风了

最新推荐文章于 2025-05-15 12:42:43 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： background position attachment css前端背景图

本文链接：https://blog.youkuaiyun.com/Light__1024/article/details/86759586

前端专栏收录该内容

17 篇文章

订阅专栏

本文探讨了前端CSS中的背景属性使用，包括颜色、背景图`background-image`设置，`background-position`用于CSS雪碧图技术，通过`position`调整背景图显示，以及`background-attachment`实现固定背景效果。通过实例解析了如何优化前端页面的加载速度和视觉呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小练习美化a超链接

    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        /*去掉ul默认样式*/
        ul{
            list-style: none;
        }
        .nav{
            width: 960px;
            margin: 100px auto 0;
            background-color: royalblue;

            overflow: hidden;
            /*圆角设置*/
            border-radius: 3px;
        }
        .nav ul li{
            float: left;
            width: 160px;
            height: 40px;
            
             /*行高等于盒子高度，单行垂直居中*/
            line-height: 40px;

            /*a标签并不继承 父元素color*/
            /*color:white;*/
        }
        .nav ul li a{
            /*一定要给a标签一个宽度高度，鼠标在a区域会显示小手状态*/
            display: block;
            width: 160px;
            height:40px;
            color:white;
            text-align: center;
            text-decoration: none;
        }
        /*设置一些特性*/
        .nav ul li a:hover{
            background-color: red;
        }

    </style>
</head>
<body>
<div class="nav">
    <ul>
        <li>
            <a href="">导航</a>
        </li>
        <li>
            <a href="">导航</a>
        </li>
        <li>
            <a href="">导航</a>
        </li>
        <li>
            <a href="">导航</a>
        </li>
        <li>
            <a href="">导航</a>
        </li>
        <li>
            <a href="">导航</a>
        </li>
    </ul>
</div>

在这里插入图片描述

颜色

/* 颜色表示方法有哪些？
一共有三种：单词、rgb表示法、十六进制表示法

        rgb:红色 绿色 蓝色 三原色
        光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。
        用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。
        如果此项的值是255，是纯色：
        黑色：rgb(0,0,0);
        白色： rgb(255,255,255);
       	黄色: rgb(255,255,0);

        16进制表示法
            所有用#开头的值，都是16进制的。
            #ff0000：红色
            16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。

            十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;
            比如：
            background-color:#ff0000;
            等价于
            background-color:#f00;

            比如：
            background-color:#112233;
            等价于
            background-color:#123;

            只能上面的方法简化，比如
            background-color:#222333;
            无法简化！
            再比如
            background-color:#123123;
            无法简化！

            要记住：
            #000   黑
            #fff    白
            #f00   红
            #333   灰
            #222   深灰
            #ccc   浅灰

背景图 background-image

<style type="text/css">
        div{
            width: 500px;
            height: 800px;
            border: 3px solid red;

            /*背景图平铺 padding区域也会填充*/
            background-image: url("1_light__1024.ico");

            /*不平铺*/
            background-repeat: no-repeat;

            /*单一方向平铺*/
            background-repeat: repeat-x;
            background-repeat: repeat-y;
            
        }
    </style>

在这里插入图片描述

 body{
            background-image: url("1_light__1024.ico");
        }

在这里插入图片描述

背景图定位 background-position

div{
			width: 500px;
			height: 500px;
			background-image: url(1_light__1024.ico);
			background-repeat: no-repeat;

			/*正值 第一个值表示往右偏移 第二个值表示往下 负值则相反,文字没动，背景偏移*/
			background-position: -100px -100px;

			/*水平方向 left center right
			   垂直方向 top center bottom
			*/
			background-position:right bottom;

		}

在这里插入图片描述

用background-position做css sprite

CSS雪碧即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术,主要用在小图标显示上，是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分，为了减少http请求数量,加速网页内容显示。

用position调整背景图

body{
            background-image: url("xmad_15489036270154_UEsce.jpg");

背景图显示不完整，调整背景图，让图水平居中，垂直靠顶。

在这里插入图片描述

body{
            background-image: url("xmad_15489036270154_UEsce.jpg");
            background-repeat: no-repeat;

            /*水平居中banner图*/
            background-position: center top;
           
            /*水平居中banner图 也可以用百分比，（宽度减去图片宽度）的百分比*/
            background-position: 50% 0;

            /*!*综合属性设置*!*/
			background:  red  url('xmad_15489036270154_UEsce.jpg')  no-repeat   center top;
		}

固定背景图background-attachment

固定背景,滚动条滚动时，背景一直在屏幕上不动

background-attachment: fixed;

综合写法：

background: url(1_light__1024.ico) no-repeat 0 0  fixed;

改之前：
在这里插入图片描述
改之后：文字掠过背景，背景始终在屏幕上