[英]How do you Add an image to the left side of a div
I want to have an image appear on the left side of the div (centered vertically). 我想让图像出现在div的左侧(垂直居中)。 How is this done? 怎么做?
This is the code that I have. 这是我的代码。 (The image appears very tiny in each of the corners. I have tried background url(../images/error24x24.png) no repeat; but that didn't work right either. (The image loaded, but it looked funky) (图像在每个角处看起来都非常小。我尝试了背景url(../ images / error24x24.png),但没有重复;但这也不行。(图像已加载,但看上去很时髦)
.formValidation {
background-color:rgb(71,89,32);
color:white;
font-weight:bold;
padding:10px;
-moz-border-radius:6px;
border-radius:6px;
-webkit-border-image: url(../images/error24x24.png);
border-image: url(../images/error24x24.png);
}
<div class="formValidation">
Please enter a category.
</div>
EDIT: My final CSS: 编辑:我的最终CSS:
.formValidation {
background-color:rgb(52,31,36);
color:white;
font-weight:bold;
padding:10px 10px 10px 35px;
-moz-border-radius:15px;
border-radius:15px;
margin-bottom:10px;
background-image: url(../images/error24x24.png);
background-position:8px center;
background-repeat:no-repeat;
}
Use background-image
and background-position
instead of border-image
. 使用background-image
和background-position
代替border-image
。
Here's a good place to start with: http://coding.smashingmagazine.com/2009/09/02/backgrounds-in-css-everything-you-need-to-know/ 这是一个开始的好地方: http : //coding.smashingmagazine.com/2009/09/02/backgrounds-in-css-everything-you-need-to-know/
Check MDN for a comprehensive documentation: https://developer.mozilla.org/en-US/docs/CSS/background 检查MDN以获取全面的文档: https : //developer.mozilla.org/en-US/docs/CSS/background
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.