📜  CSS 在图片旁边添加一些东西 - CSS (1)

📅  最后修改于: 2023-12-03 15:14:21.396000             🧑  作者: Mango

CSS 在图片旁边添加一些东西

CSS可以为图片添加文字、边框、背景等装饰效果,使得图片更加丰富多彩。下面是一些常用的方法。

添加文字

可以通过在<img>标签的后面添加<figcaption>标签,为图片添加文字描述。示例代码如下:

<figure>
  <img src="example.jpg" alt="Example">
  <figcaption>This is an example image.</figcaption>
</figure>
添加边框

通过CSS的border属性,可以为图片添加边框。示例代码如下:

<img src="example.jpg" alt="Example" style="border: 2px solid black;">
添加背景

可以为图片周围添加背景颜色或背景图片。示例代码如下:

<img src="example.jpg" alt="Example" style="padding: 10px; background-color: gray;">
<img src="example.jpg" alt="Example" style="padding: 10px; background-image: url(bg.png);">
添加阴影

通过CSS的box-shadow属性,可以为图片添加阴影效果。示例代码如下:

<img src="example.jpg" alt="Example" style="box-shadow: 5px 5px 5px black;">

以上是CSS在图片旁边添加一些东西的方法,您可以根据需要进行使用。