html关于图片置底当背景或者图片链接

您所在的位置：网站首页 › 网页底部图片代码 › html关于图片置底当背景或者图片链接

html关于图片置底当背景或者图片链接

2024-07-14 15:38| 来源: 网络整理| 查看: 265

自己写的小米侧边栏加置底图片链接：在这里插入图片描述视频：

Rec 0001

这个后面的大图是在侧边栏的下边的，是可以点击跳转的，具体实现方法是：

我用一个父盒子为content 然后在父盒子里面定义一个img盒子，img的宽度和父盒子一样宽，再在img盒子里面放入图片链接a里面嵌套img就可以实现点击图跳转。关于侧边栏：我是在img盒子里面放侧边栏，因为我想的是img盒子是侧边栏的父亲，那侧边栏理所应当在img上面呀，然后再给侧边栏加一个float属性，那他就在图片最左边了。可事实不是这样，侧边栏跑到了img盒子的下边。在这里插入图片描述

关于为什么会下滑，我也没清楚。但是有几个猜测：1.img是个行内块元素，所以侧边盒子会掉下来。2.因为父盒子刚刚够宽度，装不下侧边栏了。我试了试扩宽父盒子，侧边栏是上去了，但不是浮在图片上面的。

尝试解决的方法

将图片作为背景，这样侧边栏就可以浮在最左边，关于链接问题，可以再设置一个div链接，面积大一点，透明色，放在图片主要位置。就用图片背景链接，但要用相对定位position：relative，来设置侧边栏悬浮在上面，这样做最简单！

这是图片当背景，然后直接浮动的样式：在这里插入图片描述 css代码段

.imgconter{ width: 2000px; height: 800px; background-image: url("图片呀/xiaomibg.jpg"); background-size: 100% 100%; } .cebian{ width: 230px; height: 800px; background: rgba(0, 0, 0, .3); float: left; }

html代码段

手机手机手机手机手机手机手机手机手机手机

直接图片链接的话：样式：在这里插入图片描述定义大盒子box，图片盒子img居中显示（图片盒子当背景必须小于父亲盒子，才可以装下其他元素，小米导航栏就是因为宽度刚刚等于，就会让侧边栏掉出来）。然后再用几个div，写上具体的css属性就可以了。源码：

Document *{ padding: 0; margin: 0%; } body{ background-color:#f5f5f5; } .box{ background-color: #ffffff; width: 295px; height: 375px; margin: 100px auto; } .box img{ /* width: 100%; */ width: 160px; height: 160px; margin: 10px auto; } div{ text-align: center; } .xinhao h4{ height:20.8px; width: 214px; padding:0 40px; margin-top: 80px; font-weight:400 ; } .jieshao p{ color: #d9c1b0; font-size: 14px; margin-top: 5px; } .jiage a{ display: block; color: #ff6700; text-decoration: none; margin-top: 25px; font-size: 14px; } .box:hover{ box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3); } 小米11 Ultra 1.12"GN2|2k四微曲屏 5999元起

【本文地址】

html关于图片置底当背景或者图片链接

html关于图片置底当背景或者图片链接

今日新闻

推荐新闻