通过CSS隐藏特定大小的图像
Hide image of specific size, by CSS?
提前感谢您的帮助!
我有一个RSS,我想在我的页面上发布这个RSS的内容,但这个RSS来自WordPress,它包含一个按钮的图像来进行评论。
问题1:如果我从RSS中隐藏每个<img>
,我也会从博客中隐藏文章上发布的图像。
问题2:评论按钮<img>
的URL是连续的,所以即使我可以隐藏"wordpress.com/comments/…12",下一个按钮<img>
的URL也是"wordpresscom/comments/…13",依此类推:(
图像的HTML:
<img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/mulleralc.wordpress.com/35/">
有一种方法可以识别评论按钮图像:它是72px乘16px。所以,我需要隐藏页面上的每一张72(宽)x 16(高)的图片。有没有一种方法可以在CSS或JavaScript中做到这一点?
既然我们有这样的编码:
img[src~="http://...url..."] {display: none;}
也许有这样的东西:
img[height="16"] {display: none;}
评论按钮的URL是连续的,所以即使我可以隐藏"wordpress.com/commentbutton/12",下一个按钮的URL也是"wordpress.com/scommentbutton/13",依此类推:(
CSS实际上可以在这里提供帮助。属性选择器可以选择包含值的属性。所以,这个:
img[src*="feeds.wordpress.com/1.0/comments"] {display: none;}
应该这样做。
我建议使用多个属性选择器,在这种情况下,将以下代码添加到CSS样式表中:
img[width="72"][height="16"] {
display: none;
}
这种方法唯一的问题是它在旧的浏览器(例如IE 6)中不起作用,因为它们无法识别它们。
如果您使用的是JavaScript库jQuery,您可以使用以下脚本:
$('img').each(function () {
'use strict';
var img = $(this);
if (img.width() === 72 && img.height() === 16) {
img.hide();
}
});
使用多个属性选择器。
您的图像标签必须使用width
和height
属性才能工作。
HTML
<img src="your-image.jpg" width="72" height="16" />
CSS
img[width="72"][height="16"] {
display: none;
}
或
如上所述,使用CSS类。
HTML
<img class="hide-from-rss" src="your-image.jpg" width="72" height="16" />
CSS
.hide-from-rss {
display: none;
}
CSS无法做到这一点。它不知道你的页面上有多大的图像。你需要JavaScript来解决这个问题。
- 如何使用css动画/javascript使具有背景图像的元素出现
- css停止图像在滚动中移动
- 浮动图像左作为背景-css
- 使用css()设置背景图像;不起作用
- 在屏幕中央显示图像 CSS jQuery
- 确定body's背景图像(css)已加载
- 如何设置DIV背景图像css jquery
- JQuery 如何仅添加带有第 n 个子级的点击图像 CSS 类
- 如何防止谷歌浏览器在设置背景图像 css 时击中服务器
- 如何使用nodejs获取我网站上所有图像/ css / js的所有文件大小
- jquery背景图像css
- JQuery切换图像CSS
- 用文本交换图像(CSS或jQuery?).
- 背景图像CSS不显示
- Nav背景以匹配身体背景图像Css
- 更改基于屏幕的不同背景图像:-css HTML5 Gallery
- 动态创建图像/CSS到画布
- 仅浮动图像 css
- 图像 CSS 样式上不需要的边框
- 如何在图像 CSS 上放置一个思想气泡