您将在此代码中看到我们有一个随机代码树和子图像树。即使您使用自定义类,子图像也始终遵循图像的父级max-width属性。无论如何,对于所使用的课程,有没有这样做?
注意这是在vbulletin上使用如此多的CSS覆盖它是荒谬的。新的CSS位于vbulletin自定义css文件“additional.css”
中另外请注意,悬停效果 约束为120px,但正常类不会超出。
CODE
<div class="content">
<p>
<div>
<div class="something">
<img src="http://shadowness.com/file/item9/314049/image.jpg" class="thumbbbimg" />
</div>
</div>
</p>
</div>
CSS
.content img {
max-width: 100%;
}
.thumbbbimg {
max-width: 120px;
}
实际CSS
/* Thumb BBCode CSS */
.content img.thumbbbimg {
width: 120px;
max-width: 120px;
max-height: 120px;
opacity: 75;
margin: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 5px 5px rgba(0,0,0,0.4);
-moz-box-shadow: 0 0 5px 5px rgba(0,0,0,0.4);
box-shadow: 0 0 5px 5px rgba(0,0,0,0.4);
border: 1px solid #8C8C8C;
filter: url(filters.svg#grayscale);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(100%);
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1);
overflow: hidden;
}
.content img.thumbbbimg:hover {
width: 120px;
max-width: 120px;
max-height: 120px;
opacity: 100;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 5px 5px rgba(255,255,255,0.3);
-moz-box-shadow: 0 0 5px 5px rgba(255,255,255,0.3);
box-shadow: 0 0 5px 5px rgba(255,255,255,0.3);
filter: none;
-webkit-filter: grayscale(0%);
filter: gray;
-webkit-filter: grayscale(0);
}
答案 0 :(得分:1)
您可以通过将.thumbbbimg
替换为img.thumbbbimg
来实现此目的:
JSFiddle - DEMO
.content img {
max-width: 100%;
}
img.thumbbbimg {
max-width: 120px;
}
<div class="content">
<p>
<div>
<div class="something">
<img src="http://shadowness.com/file/item9/314049/image.jpg" class="thumbbbimg" />
</div>
</div>
</p>
</div>
答案 1 :(得分:1)
.content img :not(.thumbbimg) {
max-width: 100%;
}
.thumbbbimg {
max-width: 120px;
}
小提琴:
http://jsfiddle.net/41tyamsz/2/
使用:not
会将规则应用于除指定元素之外的元素。
答案 2 :(得分:-1)
不要养成这个习惯,但是你可以用一个重要的方式覆盖,如此
.thumbbbimg {
max-width: 120px !important;
}