论坛 › 马黑黑教程专版 › 图片的简单修饰演示

马黑黑 发表于 2022-1-3 09:42

图片的简单修饰演示

<p>一个小小的修饰，效果大不同：<br> &nbsp;</p>
<p style="text-align:center;">
    <img src="https://www.huachaowang.com/data/attachment/forum/202201/03/093625rzd54d5fgoehr0cn.jpg" alt="" style="border:5px double olive; border-radius:4px; opacity:0.75;">
</p>

马黑黑 发表于 2022-1-3 09:49

本帖最后由 马黑黑 于 2022-1-3 09:51 编辑

图片代码及简单解释：

<img src="图片地址" alt="" style="border:5px double olive; border-radius:4px; opacity:0.65;" />

CSS修饰代码：style="border:5px double olive; border-radius:4px; opacity:0.65;"

第一个部分：border，设置了边框；

第二部分：border-radius，设置了小圆角；

第三部分：opacity，设置了不透明度。不透明度从 0.0 到 1，0.0是完全透明，1 完全不透明。

请注意：img 标签中的 border=“1” 这样的属性设置已被废弃，所以建议改用如上的 CSS 方式，即 style=“border: ...;" 的边框修饰法。

马黑黑 发表于 2022-1-3 10:08

opacity 的意思是”不透明的“，作为 CSS3 的一个属性，可用于更改某个元素的不透明度。
CSS简单语法：opacity: 值


例如：opacity: 0.25;

值可从 0.0 到 1 之间选取，值越大，不透明度就越大，是 1 时完全不透明，亦即时图片本来的样子。

嵌入 HTML 代码用 style 语句：style="opcity:0.6;"

马黑黑 发表于 2022-1-3 10:22

<div style="margin:0 auto; width:600px; height:338px; background:url('https://www.huachaowang.com/data/attachment/forum/202201/03/093625rzd54d5fgoehr0cn.jpg') no-repeat; box-shadow:2px 2px 6px #333;">
    <p style="opacity:0.5;text-shadow:2px 2px 4px #000;font-family:'黑体'; font-size:28px;font-weight:bold; color:#ddd;padding:8px;">二〇二二吉祥如意</p>

</div>

加林森 发表于 2022-1-3 10:48

老黑又一新教程，真好！谢谢老黑！{:4_199:}

马黑黑 发表于 2022-1-3 11:02

加林森 发表于 2022-1-3 10:48
老黑又一新教程，真好！谢谢老黑！

感谢支持。演示而已，不算教程。

加林森 发表于 2022-1-3 11:11

<div style="margin:0 auto; width:500px; height:330px; background:url('https://www.huachaowang.com/data/attachment/forum/202201/03/105553c1b9dqrh7qhooedo.jpg') no-repeat; box-shadow:2px 2px 6px #333;">
    <p style="opacity:0.5;text-shadow:2px 2px 4px #000;font-family:'黑体'; font-size:28px;font-weight:bold; color:#ddd;padding:8px;">二〇二二吉祥如意</p>

</div>

跟到学习。

加林森 发表于 2022-1-3 11:17

<p style="text-align:center;">
    <img src="https://www.huachaowang.com/data/attachment/forum/202201/03/105553c1b9dqrh7qhooedo.jpg" alt="" style="border:5px double olive; border-radius:4px; opacity:0.75;">
</p>


看学习效果

加林森 发表于 2022-1-3 11:18

真漂亮。为老黑点赞！{:4_199:}

马黑黑 发表于 2022-1-3 11:38

马黑黑 发表于 2022-1-3 11:42

加林森 发表于 2022-1-3 11:18
真漂亮。为老黑点赞！

加个框效果不同哈

加林森 发表于 2022-1-3 11:54

马黑黑 发表于 2022-1-3 11:42
加个框效果不同哈

是啊，漂亮的边框真漂亮。

马黑黑 发表于 2022-1-3 12:37

加林森 发表于 2022-1-3 11:54
是啊，漂亮的边框真漂亮。

理解之后，试着修改一些值

加林森 发表于 2022-1-3 12:54

马黑黑 发表于 2022-1-3 12:37
理解之后，试着修改一些值

嗯嗯，我得去试一试就知道了。

马黑黑 发表于 2022-1-3 12:59

加林森 发表于 2022-1-3 12:54
嗯嗯，我得去试一试就知道了。

对，就酱紫

加林森 发表于 2022-1-3 13:01

马黑黑 发表于 2022-1-3 12:59
对，就酱紫

嗯嗯

马黑黑 发表于 2022-1-3 15:31

加林森 发表于 2022-1-3 13:01
嗯嗯

给图片加框、边框阴影，做圆角，都可以

加林森 发表于 2022-1-3 16:21

马黑黑 发表于 2022-1-3 15:31
给图片加框、边框阴影，做圆角，都可以

好的好的，慢慢制作吧。

马黑黑 发表于 2022-1-3 17:15

加林森 发表于 2022-1-3 16:21
好的好的，慢慢制作吧。

不急不急

马黑黑 发表于 2022-1-3 17:17

查看完整版本: 图片的简单修饰演示