CSS背景图片

最新推荐文章于 2023-02-01 10:11:58 发布
最新推荐文章于 2023-02-01 10:11:58 发布
阅读量694 收藏 7
点赞数
分类专栏： HTML+CSS 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61768489/article/details/121025809
版权
本文详细介绍了CSS中关于背景图片的设置，包括如何设定背景图片的宽度、高度和平铺方式，调整图片位置，实现背景图片固定，以及如何使用rgba()实现背景的半透明效果。通过这些技巧，可以更精细地控制网页的视觉呈现。
摘要由CSDN通过智能技术生成

1.背景图片植入与平铺

设置背景width；height；

图片植入background-image: url(图片地址) ；

图片默认平铺

 

2.背景图片位置

background-position：

 

3.背景图像固定

默认是随网页滑动的；

固定则

background-attachment：fixed

4.背景属性复合写法

能减少代码量

 

 5.背景半透明

background：rgba（  x，x ，x ，.n ）

 

 

 

ThnPkm
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS背景
Y_ooo的博客
11-03 144
1.背景颜色 background-color: transparent透明色（默认）|color div { width: 200px; height: 200px; background-color: transparent; background-color: pink; } 2.背景图片 实际开发常见于logo/一些装饰性的小图片/超大的背景图片，优点是非常便于控制位置。（精灵图也是一种运用场景） background-image: url(xxx) | none
【css背景图片自适应】css怎么设置背景图片自适应大小
04-11
在css中，可以利用“background-size”属性设置背景图片自适应大小，该属性用于设置背景图片的大小，只需要给背景图片元素添加“background-size:cover;”样式，即可使背景图片的大小自适应。
CSS样式——背景图片
m0_67391270的博客
03-19 3436
文章目录 颜色color 图片image 图片大小size 重复repeat 滚动行为attachment 坐标position 位置origin 裁剪clip 颜色color 用颜色作为背景。 <div id="app"></div> * { margin: 0; padding: 0; } #app { width: 400px; height: 300px; background-color: red; } 图片image 默认会显示不全 backgrou
css背景图片_CSS背景
cuk0051的博客
08-29 814
css背景图片The background of an element can be changed using several CSS properties: 可以使用几个CSS属性来更改元素的背景： background-color background-color background-image background-image background-clip backgrou...
CSS 背景图像
weixin_44664352的博客
09-14 286
CSS 背景图像 background-image 属性指定用作元素背景的图像。 默认情况下，图像会重复，以覆盖整个元素。 实例 页面的背景图像可以像这样设置： body { background-image: url("paper.gif"); } 还可以为特定元素设置背景图像，例如 <p> 元素： p { background-image: url("paper.gif"); } 以上内容均整理自W3C，如需阅读全文请点击链接。 ...
CSS 设置背景图片
忧郁的蛋的专栏
02-01 3万+
通过上面的代码可知，无法完全实现「设置左侧区域背景图片高度填充整个可视区域，图片宽度自适应」。
css 背景图片平铺技巧
12-09
使用css来设置背景图片同传统的做法一样简单，但相对于传统控制方式，css提供了更多的可控选项，我们先来看看最基本的设置图片的方法。xhtml代码： 复制代码代码如下:”content”> </div> css代码： 复制代码代码...
完美解决webpack打包css背景图片路径问题
11-20
然而，在处理CSS背景图片时，开发者可能会遇到路径问题，这通常是由于Webpack的配置不当所引起的。本文将详细解析如何解决Webpack打包CSS背景图片路径问题。 首先，让我们分析问题所在。在Vue组件的样式部分，我们...
css 背景图片
05-22
以下是对“css背景图片”相关的六个关键知识点的详细解析： ### 1. 背景颜色 `background-color` 在CSS中，`background-color` 属性用于设置或更改元素的背景颜色。此属性接受各种颜色值，包括十六进制颜色代码、...
css背景图片设置案例
最新发布
01-25
css-backimagecss-backimagecss-backimagecss-backimagecss-backimagecss-backimagecss-backimagecss-backimagecss-backimagecss-backimagecss-backimagecss-backimage
css设置背景图片
热门推荐
『程序员·小李』的博客
12-27 6万+
背景图片的层级：首先设置的图片资源会浮在最上层（z-index最大），否则容易被遮盖。 设置两种不同的背景 示例 <div id="example1"> <h1>Lorem Ipsum Dolor</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore mag
CSS背景图像
无糖加冰
11-11 382
CSS背景图像 CSS的背景可以利用页面元素添加背景样式 背景样式可以设置背景颜色,背景图片,背景是否平铺,背景图片的位置,背景图片的固定等等 一,背景颜色 background-color: 颜色值;(透明的transparent) 二,背景图片 background-image: none/url(地址);(none表示没有背景图片 url使用绝对或者相对地址) 三,背景的平铺 HTML中页面对背景图片进行平铺background-repeat属性 参数值:repeat(背景图像默认在纵向和横向
css背景图片
你蠢哭我咯的博客
01-18 995
background-image:url('../../img/up.png'); background-repeat:no-repeat; background-position: right center; background-size: 0.7rem 100%;
CSS控制背景图片
zbl131的专栏
05-28 665
疑惑很久的一个问题终于在CSDN上得到了答案，记录下来。问题：在 www.56.com 的上面蓝色导航条上点击右键-》背景令存为 ，会保存一张有很多图标的图片文件，这些图标基本上就是这个页面上用到的所有图标的一个集合，但是页面显示确是各个图标分开显示的 ，这是怎么实现的? 还有为什么有些网站的logo看上去是个图片，但是点击右键没有 图片令存为  ，保存整个页面也没有 这个logo图片 这是怎么实
CSS 背景样式
xiangxiongfly
05-24 1954
background-color 背景颜色 background-image 背景图片 background-repeat 背景平铺方式 background-position 背景位置 background-attachment 背景固定模式 background 简写 background-size 背景大小 background-origin 背景位置 background-clip 背景剪切 多背景图片 CSS精灵图
CSS图片背景样式
沃和莱特的博客
05-15 6066
前言： 上次我们介绍的CSS的背景样式，但是图片背景样式我们没有过多阐述，那么CSS的图片背景样式还有哪些值得一看的地方呢，一起看看叭~
css背景图片_CSS背景图片
cungui5726的博客
08-17 215
css背景图片CSS can also be used to place images in the background of any element. The property to do so is called, not surprisingly, background-image: CSS还可以用于将图像放置在任何元素的背景中。 毫不奇怪，这样做的属性称为background-imag...
css 背景图片尺寸
08-12
CSS背景图片的尺寸可以有多种方式来指定。以下是一些常见的方法： 1. 固定尺寸：可以使用具体的像素值来指定背景图片的宽度和高度。例如： ```css .example { background-image: url("example.jpg"); background-size: 200px 300px; } ``` 这样设置后，背景图片的宽度将为200像素，高度将为300像素。 2. 百分比尺寸：可以使用百分比值来指定背景图片相对于容器元素的尺寸。例如： ```css .example { background-image: url("example.jpg"); background-size: 50% 75%; } ``` 这样设置后，背景图片的宽度将为容器宽度的50%，高度将为容器高度的75%。 3. 自适应尺寸：可以使用 `cover` 或 `contain` 值来让背景图片自适应容器大小。例如： ```css .example { background-image: url("example.jpg"); background-size: cover; } ``` 使用 `cover` 值后，背景图片将被缩放并裁剪以填满容器，可能会导致部分内容被裁剪。而使用 `contain` 值后，背景图片将被缩放以适应容器大小，并保持完整的内容显示。 通过以上几种方式，你可以根据需要来设置背景图片的尺寸大小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值