给image元素设置背景图

最新推荐文章于 2024-06-02 16:22:33 发布

前端学习007

最新推荐文章于 2024-06-02 16:22:33 发布

阅读量2.1k

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_44433499/article/details/107363926

版权

本文介绍如何在前端开发中使用CSS为image元素添加背景图，特别是在image1展示静态图片且需要移除背景图，以及image2动态加载图片并处理无图片时显示背景图的场景。点击添加按钮后，图片会显示所选内容，同时确保原有的背景图不会遮挡图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面代码：image1为静态图片，image2动态加载图片，没有图片则显示背景图。

nimg.cn/20200716172313158.png)

  <image  style="margin: 9px; position: absolute; z-index: 1;"
       src="../../static/select.png"></image>
 <image style="width: 88px; height: 88px;" :src="titem.imgUrl"></image>

//给图片增加背景图
image {
			width: 100%;
			height: 350px;
			z-index: 999;
            background: url(../../static/sxpic.png)  no-repeat;
            background-size: 370px 240px;
		}

想要实现点击添加按钮图片显示已选择。因为是提示信息为一张静态图片，也会带有背景，从而遮住了原来的图片。
在这里插入图片描述
需要给image1 去掉背景图background: none;

 <image style="margin: 9px; position: absolute; z-index: 1; background: none;"src="../../static/select.png"></image>
  <image style="width: 88px; height: 88px;" :src="titem.imgUrl"></image>

实现效果：
在这里插入图片描述