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

news/2024/11/17 20:41:06/文章来源:https://www.cnblogs.com/Wmt0927/p/18388829

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

最开始做的时候能想到的办法只有嵌套多层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.hqwc.cn/news/789643.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

情绪低落难释怀?数业智能心大陆用 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根本没有遍历表或索引就返回数据了)由此…

Oracle 19c OCP 082认证考试题库(第6题)- 2024年修正版

【优技教育】Oracle 19c OCP 082题库(第6题)- 2024年修正版 考试科目:1Z0-082 考试题量:90 通过分数:60% 考试时间:150min 本文为(CUUG 原创)整理并解析,转发请注明出处,禁止抄袭及未经注明出处的转载。 原文地址:http://www.cuug.com/index.php?s=/home/article/detai…

08年买的电脑!一样玩《黑神话:悟空》!(影视级画质)

中国PC游戏界迎来了一场“大地震”!备受瞩目的国产3A级游戏《黑神话:悟空》正式全球发售。这款由游戏科学公司开发的动作角色扮演游戏,在研发阶段就吸引了无数目光。根据游戏平台Steam的数据显示,《黑神话:悟空》不仅在中国区,而且在全球范围内都持续占据热销榜首。游戏中…

两句话讲清楚离线安装docker

银河麒麟、离线环境,装吧,一装一个不吱声。两句话讲清楚离线安装docker 目录两句话讲清楚离线安装docker写在前面解决方案 写在前面背景:银河麒麟、离线环境,装吧,一装一个不吱声。参考链接:https://blog.csdn.net/zhaogangyyxf/article/details/141328640准备:docker安…

玩黑悟空要配什么显卡?ToDesk云电脑一招搞定!

近期国产游戏大作《黑神话悟空》的预售开启,许多玩家对于如何配置自己的电脑以畅玩这款画质卓越、支持全景光追的3A大作产生了浓厚的兴趣。尤其是显卡的选择,成为了玩家们关注的焦点。《黑神话悟空》官方推荐最低显卡配置为1060ti起步,最高可达4080 Super,以满足不同分辨率…