css笔记：（背景相关的属性）

最新推荐文章于 2024-04-04 02:15:35 发布
最新推荐文章于 2024-04-04 02:15:35 发布
阅读量895 收藏 28
点赞数 20
文章标签： css 笔记 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l_al_al_a/article/details/136762968
版权

#目标#：能够使用背景相关属性装饰元素的背景样式

学习路径：

1.背景颜色

->属性名：background-color(bgc)

->属性值：

颜色取值：关键字，rgb表示法，rgba表示法，十六进制......

->注意点：

背景颜色默认值是透明：rgba(0,0,0,0)、transparent

背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

代码示例：

 <style>

        div{

            width: 600px;

            height: 600px;

            /* background-color: pink; */

            /* background-color: #ccc; */

            /* rgba红绿蓝三原色，a是透明度(范围在0~1之间) */

            background-color: rgba(0,0,0,.5);

        }

    </style>

</head>

<body>

    <div>div</div>

</body>

2.背景图片

属性名：background-image(bgi)

属性值：background-image: url('图片的路径')；

->注意点：

*背景图片中url中可以省略引号

*背景图片默认是在水平和垂直方向平铺的

*背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

代码示例：

 <style>

        div{

            width: 700px;

            height: 800px;

            background-color:pink;

            background-image: url(./图片名称.jpg);

        }

    </style>

</head>

<body>

    <div>证件照</div>

</body>

3.背景平铺

属性名：background-repeat（bgr）

属性值：

取值：repeat                效果：（默认值）水平和垂直方向都平铺  

效果：no-repeat           效果：不平铺

取值：repeat-x             效果：沿着水平方向（x轴）平铺

取值：repeat-y             效果：沿着垂直方向（y轴）平铺

代码示例：

 <style>

        div{

            width: 900px;

            height: 2000px;

            background-color:pink;

            background-image: url(./图片名称.jpg);

            background-repeat: no-repeat;

            /* 不平铺：图片只显示一个（工作中常用） */

            /* background-repeat: repeat-x; */

            /* background-repeat: repeat-y; */

            /* background-repeat: repeat; */

        }

    </style>

</head>

<body>

    <div>证件照</div>

</body>

4.背景位置

属性名：background-position（bgp）

属性值：background-position：水平方向位置 垂直方向位置;

注意点：

方位名词取值和坐标取值可以混着使用，第一个取值表示水平，第二个取值表示垂直

代码示例：

 div{

            width: 1000px;

            height: 1200px;

            background-color:pink;

            background-image: url(./5B55F2CEB5AD20950A7C8CD69F4ECD9C.jpg);

            background-repeat: no-repeat;

            /* 方位名词表示： */

            /* 放在右上角 */

            /* background-position: right 0; */

            /* 放在右下角 */

            /* background-position: right bottom; */

            /* 放在中间 */

            /* background-position: center center; */

            /* 放在中间也可以写成 */

            /* background-position: center; */

            /* 数字+px坐标表示 */

            /* 图片向右移动10px */

            /* background-position: 10px 0; */

            /* 图片向右移动10px，向下移动10px */

            /* background-position: 10px 10px; */

            /* 图片向左移动100px，图片向上移动100px */

            background-position: -100px -100px;

            /* 正数：向右向下移动；负数：向左向上移动 */

            /* 注意：背景色和背景图只显示在盒子里面 */

        }

    </style>

</head>

<body>

    <div>证件照</div>

</body>

5.背景相关属性连写

属性名：background（bg）

属性值：

单个属性值的合写，取值之间以空格隔开

书写顺序：

推荐：background：color image repeat position

省略问题：

可以按照需求省略

特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background：url（）

注意点:

如果需要设置单独的样式和连写

.1.要么把单独的样式写在连写的下面

.2.要么把单独的样式写在连写的里面

代码示例：

<style>

        div{

            width: 1200px;

            height: 1200px;

            /* 不分先后顺序：背景色 背景图 背景图平铺 背景图位置 */

            /* 背景图位置如果是英文单词（方位名），则可以颠倒顺序 。如以下两种，是相同的效果*/

            /* background: skyblue url(./5B55F2CEB5AD20950A7C8CD69F4ECD9C.jpg) no-repeat center bottom; */

            /* background: skyblue url(./5B55F2CEB5AD20950A7C8CD69F4ECD9C.jpg) no-repeat bottom center ; */

            /* 背景图位置如果是用数值表示，不要颠倒顺序 */

            /* 如以下两种，显示效果不同 */

            /* 水平50px，垂直100px */

            /* background: skyblue url(./5B55F2CEB5AD20950A7C8CD69F4ECD9C.jpg) no-repeat 50px 100px ; */

            background: skyblue url(./5B55F2CEB5AD20950A7C8CD69F4ECD9C.jpg) no-repeat 100px 50px ;

        }

    </style>

</head>

<body>

    <div>证件照</div>

</body>

6.1（扩展）img标签和背景图片的区别

->：需求：需要在网页中展示一张图片的效果？

->方法一：直接写上img标签即可

img标签是一个标签，不设置宽高默认会以原尺寸显示

->方法二：div标签+背景图片

需要设置div的宽高，因为背景图片只是装饰的css样式，不能撑开div标签

工作时，较为重要的图片（如产品图片）用img标签显示

提示性图片用div标签+背景图片显示

l_al_al_a
关注
  • 20
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
css笔记css笔记css笔记
04-03
在网页设计领域，CSS（层叠样式表）扮演着至关重要的角色，它使得网页的布局、字体、颜色、背景等视觉元素得以精确控制。CSS 的引入解决了早期纯 HTML 页面表现与结构混合的问题，实现了内容与样式的分离，提高了...
css:笔记
03-10
在这个“css:笔记”的主题下，我们将深入探讨CSS的相关知识点。 一、CSS基础 1. 选择器：CSS选择器是用于选取HTML或XML文档中要应用样式的元素。例如，类选择器（.class）、ID选择器 (#id) 和元素选择器 (element)...
css背景属性
ssjjrr的博客
09-30 3332
css背景属性
最详细的CSS常用背景属性总结（background-color、background-image、background-repeat、background-position等）
热门推荐
weixin_56242678的博客
05-21 1万+
由于自己在学习CSS的过程中会时不时忘记一些CSS背景样式的书写，因此在本文记录了一些常用的CSS背景样式的写法。以上就是有关常用背景样式的笔记内容，希望对各位有所帮助，作者也在学习中，如有解释不清楚或有误的地方，还请各位指正。
CSS-常用样式-–-背景属性，开发8年的老前端才知道
最新发布
2401_84023579的博客
04-04 1642
背景颜色。
CSS背景属性和盒子模型
2302_80088975的博客
03-17 968
css背景，盒子模型相关知识
css 背景属性
gl6557的博客
01-18 74
背景属性
css笔记
04-02
这本“css笔记”是对CSS技术的深入理解和实践的总结，旨在帮助开发者巩固基础知识，提升技能水平。 **基本概念** 1. **选择器**：CSS通过选择器来定位HTML元素，如标签选择器（`p`）、类选择器（`.myClass`）、ID...
部分CSS笔记.docx
09-08
CSS 基础笔记 CSS 是一种标记语言，用于描述 HTML 或 XML 文档的表示方式。以下是 CSS 基础笔记的知识点总结： 一、选择器 * 兄弟选择器：h1 + p { margin-top:0 }，选择紧邻的兄弟元素 * 子元素选择器：div#...
CSS基础_css_笔记
09-23
然后，我们可以为选择器设置属性，如`color`改变文本颜色，`font-size`设定字体大小，`background-color`设置背景色等。 **二、盒模型** 理解CSS盒模型是关键。每个HTML元素都可以看作一个矩形框，包含内容、内...
CSS 的背景属性（开发中常用）
smilehjl
12-12 538
 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致。把表格中的五个属背下来，然后写一下练习关于css的背景属性应该就有大概的了解了，但还是的在实践中加深巩固。 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标。 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标。 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。1. 参数是方位名词。2. 参数是精确单位。
零基础学习CSS---05.CSS背景属性详解
m0_52136934的博客
10-20 617
零基础学习CSS---05.CSS背景(background)属性详解。
css之背景属性
2301_80138597的博客
03-25 445
若设置的宽高超过图片本身,则会出现重复图片.所以,我们需要用repeat来设置图片是否重复,详看跳转目录4)--div为一个单纯的容器标签,没有内容样式和效果,只为了创造容器去存放内容 -->background-image:url("图片路径");用left-center渲染图片:只会选择图片的左中部分。5)background-size:设置背景图片大小属性。length:设置图片的宽高(宽度,高度)要确认图片已保存在编辑器里!要确认图片已保存在编辑器里!要确认图片已保存在编辑器里!
css如何让图片不平铺,css怎么设置图片背景不平铺？
weixin_39942318的博客
08-03 1617
css可以为图片背景设置background-repeat:no-repeat样式实现图片背景不平铺，background-repeat属性定义了图像的平铺模式。css可以设置图片背景background-repeat:no-repeat样式实现图片背景不平铺，background-repeat属性定义了图像的平铺模式。css可以使用background-repeat属性设置图片背景不平铺。从原图...
bgcolor和background-color区别
hmz856的博客
05-10 2561
（1）background-color属于css样式表里面的，这样写style="background-color:背景颜色"在HTML的标签中，比如,,,一般都是使用bgcolor。background——设置背景图片 ,并且background还能设置图片，背景，定位等。而在CSS中，标签使用color，使用。bgcolor属于HTML里面的，它这样写bgcolor="背景颜色"bgcolor——设置背景颜色。
CSS背景(详解)
qq_74095822的博客
12-18 1359
background-color 属性设置元素的背景颜色。CSS中，颜色值通常以以下方式定义:十六进制 - 如：“#ff0000”RGB - 如：“rgb(255,0,0)”颜色名称 - 如：“red”
CSS属性：背景属性
u013373276的博客
12-09 1368
），这种图要求横向的宽度特别大。比如说，设计师给你一张1920*465的超大banner图，如果我们把这个banner图作为img标签直接插入网页中，会有问题的：首先，图片不在网页的中间；光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。正确的做法是，将banner图作为div的背景图，这样的话，背景图超出div的部分，会自动移溢出。
css背景属性详解（背景图片铺满全屏的简写）
qq_37899792的博客
05-21 7731
一、背景色 属性：background-color 取值： 任意合法颜色值 transparent 注意： 背景颜色会填充到元素的内容区域，内边距区域以及边框区域 二、背景图像 属性：background-image 取值：url(......
CSS中设置背景的7个属性及简写background注意点
csgojingyu的博客
12-27 1969
css中背景的设置至关重要，也是一个难点，因为属性众多，对应的属性值也比较多，这里详细的列举了背景相关的7个属性及对应的属性值，并附上演示代码，后期要用的话，可以随时查看，那我们坐稳开车了······

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值