css background-image 显示不完整问题

Posted 2023-04-24

.tipdisplay:inline-block;padding-left:20px;background-repeat:no-repeat;background-position:0 50%;white-space:nowrap;
.tip-errorcolor:#c00;background-image:url(../images/error.gif);color:#c00;

<div class="tip tip-error">错误</div>

display:inline-block 有这个背景可以显示完整，但是DIV就不会独立一行了， 如果没有这个属性，背景图像就会显示不完整，有什么办法 让显示完整 又可以独立一行吗？ 因为用的是jquery.validate 所以在外部在加个div 是不行的
如果将display:inline-block 换为display:block 则图片显示完整，DIV换行正常，但是span是用了这个class 也自动换行了

参考技术A 定义多一个line-height就可以了，你希望一行有多高，line-height就设多大。
例如line-height:24px; 这样~
还有一个方法，就是在CSS里面加一个选择器：
div.tip clear:both;
或者
div.tip display:block
把它加在.tip样式的后面，这样如果是DIV应用了tip样式的话，就会执行独立成一行的样式，而span就不会应用到这个样式。追问

我没太看懂你后面那2个方法，能写个DEMO吗？

追答

.tipdisplay:inline-block;padding-left:20px;background-repeat:no-repeat;background-position:0 50%;white-space:nowrap;
div.tip display:block

这样写CSS就可以了~~~
div.tip表示的是定义了tip的class的DIV,对于除了DIV以外的标签是不会生效的~~

本回答被提问者采纳 参考技术B 设置它的属性值。

background-image 图片的大小怎么设置

在EDM中（只有body，css不能外置）

<a href="" style=" background-image:url(AlienLa0.gif); color:#FFF"; >Home</a>

现在图片不能完整显示

图片不能完整显示，要设置a标签的大小，adisplay:block; width:**px; height: **px; , 也可以通过背景图片定位来达到你要的效果， background-position 具体问题具体对待。。。 参考技术A css3里支持背景图缩放，用background-size属性，但是这个属性目前只有firfoxchromesafarioperaie9+浏览器支持
如果想更全面的支持，可以不要做背景用<img/>限定width、height，指定position:absolute;和left、top位置，z-index设为-1