给一个块元素添加多张背景图片

news/2024/10/6 6:52:46

最近做的项目需要用到多张底图(背景图)

最开始做的时候能想到的办法只有嵌套多层div然后设置背景图并定位以实现

今天重写这块代码发现明明可以很简单的解决!!!

话不多说,上代码

<div class="menu"><!-- 任意内容 -->
</div>

先定义元素类名,再在css中设置背景图

.menu {background-repeat: no-repeat;background-size: contain, contain; /* 或者使用 contain 来确保背景图片完全显示,可以分别为每个背景图片设置大小 */background-image: url(../assets/images/img1.png),url(../assets/images/img2.png); /* 设置两个背景图片 */background-size: 120px 120px, 120px 120px; /* 可以分别为每个背景图片大小 */background-position: top left, bottom right; /* 可以分别为每个背景图片设置位置 */
}

到此,就okk了

效果展示

 

【记录下来给自己以后使用(^-^)】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ryyt.cn/news/54678.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

情绪低落难释怀?数业智能心大陆用 AI 来破局

随着社会进步的步伐加快,人们生活节奏的日益紧张,心理健康问题越来越受到社会关注,其中,情绪调节更是心理健康的核心议题。数据显示,全球有数十亿人在不同程度上遭受着相关问题的困扰。在这样的大背景下,像数业智能这样依托先进 AI 技术的人工智能企业顺势而生,为提升用…

出海浪头之上,共探CDN进化新支力

CDN技术自问世以来已超过20个年头,在云计算与AI深度融合的大趋势下,各行业实际业务需求已发生巨变,下一代CDN技术又将走向何方?8月16日,“抓住泛娱热趋,打通增长脉络——大浪淘沙之后的CDN”技术沙龙活动在深圳圆满结束。阿里云专家与各企业代表,深入探索CDN技术变革之路…

Docmatix - 超大文档视觉问答数据集

本文,我们将发布 Docmatix - 一个超大的文档视觉问答 (DocVQA) 数据集,比之前的数据集大 100 倍。当使用 Docmatix 微调 Florence-2 时,消融实验显示 DocVQA 任务的性能提高了 20%。Docmatix 数据集样本示例缘起于 丹鼎 (The Cauldron) 的开发,丹鼎包含了 50 个数据集,旨在…

ZLMediaKit转码rtsp

把摄像机的rtsp流转码播放 1. 启动ZLMediaKit 2. 执行addStreamProxy如下,stream是流ID,不要重复,可为字母数字等, 3. rtsp://10.136.238.143/live/123 这个地址可播放,如果stream变化则同步修改,vlc播放稳定 4. rtmp://10.136.238.143/live/123 这个地址可播放,vlc过一…

老爷机低端显卡也能玩3A大作?ToDesk云电脑开启游戏新模式!

3A游戏大作因其震撼的视觉效果、复杂的剧情设计和深度的游戏体验,成为无数玩家心中的游戏白月光。然而,这些游戏往往对硬件配置有着极高的要求,尤其是显卡,是3A游戏大作的畅玩配置“硬门槛”。但现在,随着云计算技术的飞速发展,ToDesk云电脑的出现,正悄然改变这一现状,…

uniapp 微信小程序 支付

<template><view class="wrap"><view class="payComplete"><image class="img" src="@/static/image/index/6.png" /><text class="adress">支付完成后填写</text></view><vi…

元气日语 Genki-1 第 7 课 家庭照片

家族の写真 课文 I ゆい: これはソラさんの家族の写真ですか。 ソラ: ええ。 ゆい: ソラさんはどれですか。 ソラ: これです。高校の時はめがねをかけていました。 ゆい: かわいいですね。 ソラ: これは父です。ニューヨークの会社で働いています。 ゆい: 背が高…

【Mysql】mysql count主键字段很慢超时 执行计划Select tables optimized away ,最终调整buffer pool问题解决

背景:mysql表 主键字段 count,速度很慢,耗时将近30s从执行计划可以看出:explain SELECT COUNT(rule_id) AS dataCount FROM `sku_safe_stock_rule`; 原理分析:Select tables optimized awaySELECT操作已经优化到不能再优化了 (MySQL根本没有遍历表或索引就返回数据了)由此…