莲（试一下背景图片）

马黑黑 发表于 2021-12-23 20:32

马黑黑 发表于 2021-12-23 20:39

本帖最后由马黑黑于 2021-12-23 20:45 编辑

这个没有什么创意，只是试一下背景图片在论坛中的适应情况。思路是：

左边的是 img 标签图片（能复制），右边的图片是背景图片（不能右键复制）。播放器是 iframe 框架，相对位置，左移、下移。

代码：（背景图的地址要用小角单引号，否则论坛程序视为非法并将代码搞乱）
<div style="margin:0px auto;width:680px; background:url('https://www.huachaowang.com/data/attachment/forum/202112/23/201817fwogowrgg5noilgg.jpg')no-repeat 286px 10px;">
<img alt="莲花" src="https://www.huachaowang.com/data/attachment/forum/202112/23/201802swcyfxc3bpw6jwcc.jpg" />
<iframe style="position:relative;left:-15px;top:39px;" frameborder="no" border="0" marginwidth="0" marginheight="0" width=388 height=86 src="https://music.163.com/outchain/player?type=2&id=1448477631&auto=1&height=66"></iframe>
</div>

大猫咪 发表于 2021-12-23 20:47

成功了，2张图片吗{:4_204:}

马黑黑 发表于 2021-12-23 20:49

大猫咪发表于 2021-12-23 20:47
成功了，2张图片吗

对。其中有一张是背景图

大猫咪 发表于 2021-12-23 20:49

{:4_204:} {:4_173:}

马黑黑 发表于 2021-12-23 20:52

大猫咪发表于 2021-12-23 20:49

图片尺寸要了解，并对之进行控制。一般来说，都是事先安排好各种尺寸，然后依据尺寸制作代码。

大猫咪 发表于 2021-12-23 20:54

马黑黑发表于 2021-12-23 20:52
图片尺寸要了解，并对之进行控制。一般来说，都是事先安排好各种尺寸，然后依据尺寸制作代码。

嗯嗯了解了，一会学习下 {:4_190:}

马黑黑 发表于 2021-12-23 20:55

大猫咪发表于 2021-12-23 20:54
嗯嗯了解了，一会学习下

辛苦辛苦
{:4_180:}

红影发表于 2021-12-23 21:12

原来背景图和标签图是不一样的，学习了{:4_187:}

绿叶清舟 发表于 2021-12-23 21:19

这个代码简洁了很多啊，不用再用表格的了

马黑黑 发表于 2021-12-23 22:29

绿叶清舟发表于 2021-12-23 21:19
这个代码简洁了很多啊，不用再用表格的了

背景图片 CSS 本来就有的，在 CSS3 里，它可以以单独一个图片出现、可以设置位置和大小，也可以以平铺方式呈现背景

马黑黑 发表于 2021-12-23 22:31

红影发表于 2021-12-23 21:12
原来背景图和标签图是不一样的，学习了

背景图是加诸于对象的，是对象的一部分，所以不能右键复制

页: [1]

花潮论坛's Archiver

莲（试一下背景图片）