web前端学习114-125（CSS的背景颜色，背景图片，是否平铺，背景位置，背景附着，背景简写，背景颜色半透明）

最新推荐文章于 2024-05-08 15:26:56 发布
最新推荐文章于 2024-05-08 15:26:56 发布
阅读量1.8k 收藏 10
点赞数 3
分类专栏： css web前端基础学习笔记 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51249285/article/details/122450971
版权

文章目录

3. CSS的背景

通过CSS 背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

3.1 背景颜色

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

background-color:颜色值;

一般情况下元素背景颜色默认值是transparent(透明），我们也可以手动指定背景颜色为透明色。

eg : 15-背景颜色.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            /* background-color: transparent; 透明的，清澈的 */
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

网页显示

在这里插入图片描述

3.2 背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置.(精灵图也是一种运用场景)

比如王者荣耀这个logo

在这里插入图片描述

还有一些装饰性的小图片

在这里插入图片描述

一般都是用背景图片

语法

background-image : none | url (url)
参数值作用
none无背景图（默认的）
url使用绝对或相对地址指定背景图像

eg. 16-背景图片.html

（其中保存一个王者荣耀logo图片在相同路径image/logo.png）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            /* 不要落下url() */
            background-image: url(images/logo.png);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

网页显示

在这里插入图片描述

默认时平铺，上图，沿x,y轴平铺

3.3 背景平铺

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。

background-repeat:repeat | no-repeat | repeat-x | repeat-y
参数值作用
repeat背景图像在纵向和横向上平铺(默认的)
no-repeat背景图像不平铺
repeat-x背景图像在横向上平铺
repeat-y背景图像在纵向平铺

eg . 17-背景平铺.html

(每一种写法都有，但是代码块中只显示沿着y轴平铺，其他被注释掉了，可以更改)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-image: url(images/logo.png);
            /* 1 背景图片不平铺 */
            /* background-repeat: no-repeat; */
            /* 2 默认的情况下，背景图片都是平铺的 */
            /* background-repeat: repeat; */
            /* 3 沿着x轴平铺 */
            /* background-repeat: repeat-x; */
            /* 4 沿着y轴平铺 */
            background-repeat: repeat-y;
            /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

网页显示

在这里插入图片描述

3.4 背景图片位置

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

background-position: x y;

参数代表的意思是∶x坐标和y坐标。可以使用方位名词或者精确单位

参数值说明
length百分数|由浮点数字和单位标识符组成的长度值
positiontop | center | bottom | left | center | right 方位名词
  1. 参数是方位名词
  • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
  • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

eg : 18-背景位置-方位名词.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            /* background-position: 方位名词; */
            /* background-position: center top;  */
            /* background-position: center right;  */
            /* 如果是方位名词right center和 center right效果是等价的跟顺序没有关系 */
            /* background-position: right center;  */
            /* 此时 水平一定是靠右侧对齐 第二个参数省略 y轴是 垂直居中显示的 */
            background-position: right; 
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

网页显示（此处logo图片没有搞好，最好用后面小插曲中的扒图，就不要使用截图）

在这里插入图片描述

背景位置案例一

王者荣耀中（红色框）设计

在这里插入图片描述

小的图片就用背景图片，不要用之前学的图片插入，不好调整

eg : 19-背景位置方位名词应用一.html

（提前在相同路径保存一个图片image/icon.png）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3 {
           width: 118px;
           height: 40px;
           background-color: pink;
           font-size: 14px;
           font-weight: 400;
           line-height: 40px;
           background-image: url(images/icon.png);
           background-repeat: no-repeat;
           background-position: left center;
           text-indent: 1.5em;
        }
    </style>
</head>
<body>
    <h3>成长守护平台</h3>
</body>
</html>

网页显示

此处背景颜色用的粉色，因为可以方便观察到此处盒子大小，等到实际应用，就使用合适的颜色

在这里插入图片描述

背景位置案例二—王者荣耀背景图片

大图片一般也不用插入图片的方法，用背景图片

eg : 20-背景位置方位名词应用二.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超大背景图片</title>
    <style>
        body {
            background-image: url(images/king.jpg);
            background-repeat: no-repeat;
            background-position: center top;
        }
    </style>
</head>
<body>
    
</body>
</html>

网页显示

在这里插入图片描述

3.5 背景图像固定（背景附着)

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment后期可以制作视差滚动的效果。

可以去看腾讯QQ官网页面的效果

background-attachment : scroll | fixed
参数值作用
scroll背景内容是随对象内容滚动
fixed背景图像固定

eg . 23-背景固定.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超大背景图片</title>
    <style>
        body {
            background-image: url(images/king.jpg);
            background-repeat: no-repeat;
            /* background-position: center top; */
            background-position: center top;
            /* 把背景图片固定住 */
            background-attachment: fixed;
            color: #fff;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>玩什么王者荣耀，还不快去学</p>
    <p>玩什么王者荣耀，还不快去学</p>
    <p>玩什么王者荣耀，还不快去学</p>
    <p>玩什么王者荣耀，还不快去学</p>
    <p>玩什么王者荣耀，还不快去学</p>
    <p>玩什么王者荣耀，还不快去学</p>
    <p>玩什么王者荣耀，还不快去学</p>
    <p>玩什么王者荣耀，还不快去学</p>
    <p>玩什么王者荣耀，还不快去学</p>
    <p>玩什么王者荣耀，还不快去学</p>
    <p>玩什么王者荣耀，还不快去学</p>
    <p>玩什么王者荣耀，还不快去学</p>
    <p>玩什么王者荣耀，还不快去学</p>
    <p>玩什么王者荣耀，还不快去学</p>
    <p>玩什么王者荣耀，还不快去学</p>
    <p>玩什么王者荣耀，还不快去学</p>
    <p>玩什么王者荣耀，还不快去学</p>
    <p>玩什么王者荣耀，还不快去学</p>
    <p>玩什么王者荣耀，还不快去学</p>
</body>
</html>

网页显示

当滚动文字时，下面图片中背景图片是固定的

在这里插入图片描述

3.6 背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background中。从而节约代码量.

之前font 也有属性复合写法

当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为︰
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

background: transparent url(image.jpg) repeat-y fixed top ;

这是实际开发中，我们更提倡的写法。

3.7 背景色半透明

CSS3为我们提供了背景颜色半透明的效果。

例如：下面半透明黑框

在这里插入图片描述

在这里插入图片描述

background: rgba(0,0,0,0.3);
  • rgb红绿蓝单词首字母
  • 最后一个参数是alpha透明度，取值范围在0~1之间
  • 我们习惯把0.3的0省略掉，写为background: rgba(0,0,0, .3);
  • 注意:背景半透明是指盒子背景半透明，盒子里面的内容不受影响
  • CSS3新增属性，是IE9+版本浏览器才支持的
  • 但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

3.8 背景总结

参数值作用值
background-color背景颜色预定义的颜色值/十六进制/RGB代码
background-image背景图片url(图片路径)
background-repeat是否平铺repeat/no-repeat/repeat-x/repeat-y
background-position背景位置length/position 分别是x和y坐标
background-attachment背景附着scroll(背景滚动)/fixed(背景固定)
背景简写书写更简单背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
背景色半透明背景颜色半透明background: rgba(0,0,0,0.3); 后面必须是4个值

背景图片:实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置.(精灵图也是一种运用场景）

小插曲：从网上扒图

(例如下图)

提供方法：（还有别的简单方法，但是此处方法保证“应景”）

页面右键检查—>找到对应代码块区域—>图片中最下面方框即为图片链接—>链接右键打开新的标签页即可去下载

在这里插入图片描述
上一篇：CSS 的元素显示模式，案例：简洁版小米侧边栏

香甜的甲基橙
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5带背景半透明mp3网页音乐播放器
11-07
html5带背景半透明mp3网页音乐播放器 html5带背景半透明mp3网页音乐播放器
css背景颜色透明背景图片切换效果
12-07
在本主题中，“css背景颜色透明背景图片切换效果”涉及的是如何利用CSS实现一种动态效果，即当用户交互时，网页背景颜色逐渐变为透明，并同时切换到不同的背景图片。这种效果可以增加用户体验的趣味性和互动性，常被...
前端页面实现背景半透明，而内容不透明。
renyudouhui的博客
05-12 2485
前端实现背景半透明，而内容不透明可以使用以下两种方法 一：利用伪元素 .demo1{ width: 500px; height: 300px; line-height: 50px; text-align: center; background-color: rgba(255, 192, 203, .2); } .demo1:before { bac
前端、css背景颜色、图片、平铺、图片位置、图像固定、复合写法等、案例分析代码
最新发布
atatsuki的博客
05-08 678
背景图片:实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)二、案例分析五彩导航练习价值:1. 链接属于行内元素, 但是此时需要宽度高度,因此需要模式转换.2. 里面文字需要水平居中和垂直居中. 因此需要单行文字垂直居中的代码.3. 链接里面需要设置背景图片.因此需要用到背景的相关属性设置.4. 鼠标经过变化背景图片,因此需要用到链接伪类选择器.
android webview 透明背景,在android中的半透明webview背景
weixin_30579759的博客
05-26 496
编辑：我当前的解决方案。将json包装在div标签中并将其设置为透明。在android中的半透明webview背景我从远程填充json对象的webview。{"message": "The mission of the Canton Police Department is to protect the lives and properties of the citizens of Canton,...
Web前端html中通过CSS来设置div背景颜色透明度
MIP
10-24 9266
https://www.o6c.com/web/2016/10/22/379.html
【黑马前端—CSS基础】背景
学习如逆水行舟，不进则退
08-30 964
内容来自b站的黑马程序员pink老师 由我收集整理 总结 CSS 的背景 通过 CSS 背景属性，可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。 背景颜色 background-color 属性定义了元素的背景颜色。 background-color:颜色值; 一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色 background-color:transparent; 背景图片 backgro
小程序scroll-view与css左右滑动超出部分背景颜色不显示的解决方法
01-04
总之，解决`scroll-view`与CSS左右滑动超出部分背景颜色不显示的问题，需要对小程序的渲染机制、CSS布局以及滚动条样式有深入的理解。通过细致的排查和合理的代码编写，可以确保用户在滑动浏览时获得良好的视觉体验...
css控制背景示例(css设置背景图片、设置背景颜色)
09-25
本篇主要探讨如何利用CSS来设置背景颜色和背景图片。 **一、设置背景颜色** 1. **十六进制颜色值**：`background-color:#ff0000;` 这种方式使用6位数字表示红绿蓝三种颜色的强度，例如#ff0000代表纯红色。 2. **...
css 背景图片平铺技巧
12-09
使用css来设置背景图片同传统的做法一样简单，但相对于传统控制方式，css提供了更多的可控选项，我们先来看看最基本的设置图片的方法。xhtml代码： 复制代码代码如下:”content”> </div> css代码： 复制代码代码...
CSS3对背景图片的裁剪及尺寸和位置的设定方法
01-19
背景裁剪 CSS Code复制内容到剪贴板 background-clip:border-box|padding-box|content-box|text  用于指定background是否包含content之外的border,padding。默认值为border-box，即background从包含border在内的...
web前端背景的设置
11-08
web前端的背景设置，以及动态图的添加和代码的实现过程
CSS颜色代码大全
03-29
CSS颜色代码大全
【web前端】CSS的背景
m0_62608983的博客
01-24 1339
补： 文字的垂直居中：文字的高度等于盒子的高度 文字偏上：行高小于盒子高度 文字偏下：行高大于盒子高度 1.背景颜色 一般，默认的背景颜色为transparent（透明） 2.背景图片 logo 装饰性的小图片 超大的背景图片 要有url（） 相对位置 / 3.背景平铺 页面元素既可以添加背景图片，又可以添加背景颜色，只不过背景图片会压住背景颜色 4.背景图片的位置-方位名词 若两个值都是方位名词，则两个值的前
前端CSS颜色代码大全
weixin_34007020的博客
10-07 140
2019独角兽企业重金招聘Python工程师标准>>> ...
html怎么设置背景图 一张图平铺,html怎么设置背景图片全屏平铺？_WEB前端开发...
weixin_30412847的博客
06-04 2791
ps画笔工具快捷键是什么？_WEB前端开发ps画笔工具的快捷键是“B”；默认使用前景色绘图，通过设置后可以多种色彩一起绘制。ps的画笔分为了4类：常规画笔、干介质画笔、湿介质画笔、特殊效果画笔。html怎么设置背景图片全屏平铺？1、新建一个html文档。2、设置一下HTML的框架，然后把图片设置在同一个文件夹里面。3、加入，这样可以有样式设置。4、因为背景设置在主体，所以还要定义为body{}。5...
从零开始学前端：CSS背景颜色 --- 今天你学习了吗？（CSS：Day09）
每一次跌倒都是为了华丽的站起来。
01-17 1263
从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS） 复习：从零开始学前端：CSS字体属性和文本属性 — 今天你学习了吗？（CSS：Day08） 文章目录从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）前言第九节课：CSS背景颜色一、 背景颜色二、.背景颜色半透明三、背景图片四、背景平铺五、背景图片位置六、背景图片固定七、背景复合写法八、练习 前言 第九节课：CSS背景颜色 通过CSS背景属性，可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺
Web前端CSS颜色代码大全
奈何的人生
03-02 7999
CSS颜色代码大全         FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 #000000 #FFB7DD #FF88C2 #FF44AA  #...
Web前端，CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
热门推荐
星辰迷上大海的博客
04-28 1万+
Web前端，CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前端背景图片不重复
06-02
可以使用CSS中的background-repeat属性来控制背景图片是否重复显示。具体来说，如果要让背景图片不重复，可以将background-repeat的值设置为no-repeat，例如： ``` background-image: url("your_image_url"); background-repeat: no-repeat; ``` 这样就可以让背景图片只显示一次，不会重复出现了。另外，还可以使用background-size属性来控制背景图片的大小，以便更好地适应不同的屏幕尺寸。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值