【CSS必看】一文搞懂background相关操作

最新推荐文章于 2024-07-26 08:00:00 发布

YinJie…

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量966

点赞数 4

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_49900295/article/details/122796806

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS背景操作

一、背景颜色图片及其平铺
二、背景位置
三、背景附着（固定）
四、背景简写
五、背景半透明
六、背景缩放
七、凹凸文字效果

一、背景颜色图片及其平铺

先看下面一段代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            div {
                width: 400px;
                height: 400px;
                background-color: pink;/*设置背景颜色*/
                background-image: url(curry.jpg);/*设置背景图片地址*/
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

在浏览器中运行如下所示：
请添加图片描述
如图所示出现了平铺的效果，那么能否取消平铺呢，答案是显而易见的。我们可以通过background-repeat来取消平铺：

div {
        width: 400px;
        height: 400px;
        background-color: pink;/*设置背景颜色*/
        background-image: url(curry.jpg);/*设置背景图片地址*/
        background-repeat: no-repeat;/*取消平铺*/
    }

在浏览器中运行如下所示：
在这里插入图片描述

二、背景位置

我们的背景图片在取消平铺后，露出了底部的背景颜色，那么我们有没有什么办法将背景图片向右向左或者向想要的方向进行移动呢？
background-position来解决这个问题
利用方位名词 top bottom来更改背景图片的位置
比如：

background-position:left top; 背景图片就跑到左上角了
background-position:left top; 背景图片就跑到右上角了

左下角右下角同理，那么想让背景图片居中怎么办呢？

background-position:center center;

其中第一个center代表水平居中，第二个center是垂直居中
如果方位名词只写一个，那么另外一个默认为center

但是如果我们想移动到精确指定位置应该怎么办呢？
首先我们要知道在网页中的y轴坐标的正向不是我们在小学的时候学的向上而是向下

示例：下面我们让背景图片向右平移20像素，向下移动30像素：

div {
        width: 400px;
        height: 400px;
        background-color: pink;/*设置背景颜色*/
        background-image: url(curry.jpg);/*设置背景图片*/
        background-repeat: no-repeat;/*取消平铺*/
        background-position: 20px 30px;/*精确坐标，第一个一定是x,第二个一定是y*/
}

三、背景附着（固定）

下面我们将上例的背景放在水平居中垂直靠上的位置
然后打上一大段文字：
在这里插入图片描述
运行代码：

滚动滑轮向下图片就消失了

如果我们想让图片固定住，在滚动滑轮的时候只有图片在滑动应该怎么做呢？

background-attachment: fixed;

background-attachment 默认的是 scroll,代表图片随内容滚动

四、背景简写

我们写了这么多条background语句，是不是显得非常的繁琐呢，我们可以用一条总语句来简写background的操作。如果我们要设置背景颜色为#000，背景图片地址为curr.jpg,背景图片不重复，固定，位置水平居中，竖直方向上偏上25像素，应该如下设置：

background: #000 url(curry.jpg) no-repeat fixed center -25px

五、背景半透明

css3支持背景半透明的写法语法格式是：

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

最后一个参数是 alpha 透明度取值范围 0~1之间
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
同样，可以给文字和边框透明都是 rgba 的格式来写

六、背景缩放

背景图片设置大小 background-size

background-size: 100px /*尽量只改一个值，防止缩放扭曲失真

或者可以通过百分比的方式修改背景图片大小：

background-size: 50%; /*把背景图片缩放为原来的一半大小*/

也可以通过cover及contain的方式缩放背景图片：

background-size: cover;/*设置为cover时，会自动调整缩放比例，保证图片始终充满背景区域，如有溢出部分则会被隐藏
background-size: contain;/*设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域

七、凹凸文字效果

在这里插入图片描述
我们如何做出这样有立体效果的文字呢

这就用到了 text-shadow: 水平位置垂直位置模糊距离阴影颜色
由上图可知，我们给文字添加了两处阴影，一处向右走是暗色，一处向左走是亮色。这样就达到了凹凸文字这样的立体效果

注意：网页中竖直方向(y轴)向下为正，向上为负

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            body {
                background-color: #ccc;
            }
            div {
                color: #ccc;
                font-size: 80px;
                text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;
            }

        </style>
    </head>
    <body>
        <div>库里是mvp</div>
    </body>
</html>

在text-shadow语句中的" , “之前代表向右的阴影，” , "之后代表向左的阴影

YinJie…

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
2
评论
【CSS必看】一文搞懂background相关操作

CSS背景操作一、背景颜色图片及其平铺二、背景位置三、背景附着（固定）四、背景简写五、背景半透明六、背景缩放七、凹凸文字效果一、背景颜色图片及其平铺先看下面一段代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <style> div { width: 400px;
复制链接

扫一扫