css background 设置不了背景图片

本文分享了在使用CSS设置背景图片时遇到的问题及解决方法。作者最初未能在div元素中显示背景图片,通过检查发现是因为未设置div的宽度和高度。通过添加宽度和高度属性,成功解决了背景图片不显示的问题。

css background 设置不了背景图片

我自己在给div设置背景图片时,代码如下

.bg{
            .bg{
            background: url(./bg1.jpg) no-repeat 0 0;
        }

      .content{
          font-size: 26px;
          font-weight: bold;
          /* color: rgba(0  , 10, 10, 1); */
          color: red;
      }
        }
<div class="bg"></div>
    <div class="content">
        Hello World
    </div>

发现效果如图
在这里插入图片描述
怎么也显示不了图片
我发现我的图片地址也没有问题,最后检擦代码,发现时没有给div设置宽高原因导致的

.bg{
            width:100px;
            height: 100px;
            background: url(./bg1.jpg) no-repeat 0 0;
        }

最后完美解决问题
在这里插入图片描述

使用CSSbackground属性设置背景图片,可按以下方式操作: 可以按顺序设置如下属性(可点击进入相应的CSS手册查看使用):`background-color`(背景颜色)、`background-image`(背景图片)、`background-repeat`(背景重复)、`background-attachment`(背景图片是固定还是滚动)、`background-position`(背景图片的定位)[^1]。 各属性具体设置方法如下: - `background-image`:用于设置背景图片的URL,在`url()`中写出图片路径,就可以给元素(如div盒子)设置一个背景图片。不过,设置背景图片的盒子必须要有实质的宽度与高度,这样才可以让背景图片在显示屏上显示[^1][^2][^3]。 - `background-size`:设置背景图片的大小。可以设置为绝对像素值,也可以设置为百分比或 "cover"(填充整个容器)或 "contain"(完整显示图片)[^2]。 - `background-repeat`:设置背景图片是否重复。可以设置为 "repeat"(重复)、"no-repeat"(不重复)、"repeat-x"(横向重复)或 "repeat-y"(纵向重复)[^1][^2]。 - `background-attachment`:设置背景图片是固定还是滚动。当背景图片设置在已经设置为`overflow:scroll`的元素中时,即`overflow:scroll`和`background-attachment:scroll`同时存在,里面的背景图片不会随页面滚动也不会随容器上下滚动[^1][^4]。 - `background-position`:设置背景图片的位置。可以设置为绝对像素值,也可以设置为百分比或关键字(如 "center"、"top"、"bottom"、"left" 或 "right")[^1][^2]。 以下是一个示例代码: ```css div { background-color: #f0f0f0; background-image: url('example.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; width: 500px; height: 300px; } ```
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值