是否可以对<img>元素的占位符文本进行样式设置？
是否可以对<img>元素的占位符文本进行样式设置？
提问于 2017-05-01 19:13:43
虽然有些商店没有可用的图像，但我正在用商店图像来构建站点a。我所能做的就是使用它的占位符文本来显示商店的标题。但是，默认情况下，占位符文本位于div的左上角，没有样式。
如何针对占位符文本进行样式设计？？
更新
好吧，也许我应该提到我正在使用WordPress。也许使用一个简单的PHP，如果其他语句就足够了？？如果存在img，则显示img，否则显示我可以添加的h4元素。
回答 4
Stack Overflow用户
发布于 2017-05-01 19:23:02
您可以直接在img上设置某些属性的样式。
img {
color:red;
font-size:20px;
text-align:center;
line-height:200px;
}<img title="Test Text" src="http://exmaple.com/123.jpg" width="200" height="200"/>
Stack Overflow用户
发布于 2017-05-01 19:28:59
将文本放入和样式，就像对任何其他html元素一样。
<div class="store-title">
This is where the store name goes.
</div>如果文本已经进入HTML元素，您无法修改，您将不得不使用现有的类或id来连接到它并对其进行样式设置。
您也可以对<img>元素进行样式设置。
Stack Overflow用户
发布于 2017-05-01 19:36:16
您可以使用line-height垂直中心：
HTML
<img title="Test Text" src="http://example.com/i-dont-exist.png" width="200" height="200" onerror="this.classList.add('no-image')" />CSS
img.no-image {
color: red;
font-size: 20px;
line-height: 200px;
text-align: center;
}JSFiddle演示： https://jsfiddle.net/ugr6gp8n/2/
这是另一种样式alt文本的方法，但它只在Chrome中工作，因此不建议使用：
HTML
<img title="Test Text" src="http://example.com/i-dont-exist.png" width="200" height="200" onerror="this.classList.add('no-image')" />CSS
img[title] {
position: relative;
}
img[title]:after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
color: red;
line-height: 200px;
text-align: center;
content: attr(title);
}JSFiddle演示： https://jsfiddle.net/cxa37mLd/1/
资料来源：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43725009
复制相关文章
相似问题
腾讯云开发者
