html 给图片中间加售罄文字 并背景置灰
时间: 2024-10-10 15:06:49 浏览: 30
CSS盖章已领取/已售罄图章代码.zip
在HTML中,如果你想给图片添加“售罄”字样并设置背景灰色,可以创建一个包含图片和文本的`<div>`元素,然后使用CSS来控制样式。这里是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.sold-out {
position: absolute; /* 确保文字在图片上方 */
top: 50%; /* 文字居中上下 */
left: 50%; /* 文字居中左右 */
transform: translate(-50%, -50%); /* 把文字移动到元素中心 */
background-color: gray; /* 设置背景颜色为灰色 */
color: white; /* 图片文字颜色白色 */
padding: 8px; /* 可调整内边距 */
border-radius: 4px; /* 添加圆角 */
font-size: 16px; /* 根据需要调整字体大小 */
display: flex;
align-items: center;
justify-content: center;
opacity: 0.8; /* 设置透明度降低视觉冲击 */
transition: opacity 0.3s ease; /* 渐变显示/隐藏效果 */
}
.sold-out:hover {
opacity: 1; /* 鼠标悬停时文字完全显示 */
}
</style>
</head>
<body>
<img src="your_image_url.jpg" alt="图片描述" class="sold-out-text"> <!-- 这里将图片src替换为你实际的图片路径 -->
<div class="sold-out">售罄</div>
</body>
</html>
```
在这个例子中,当页面加载时,“售罄”文字会半透明地出现在图片中央,鼠标悬停时文字会变为完全可见。请记得将`your_image_url.jpg`替换为你的图片URL。
阅读全文