我可以使用CSS编程来设置我的img标签的属性吗?
<span><img class="img-dollar"></img></span>
<span><img class="img-royalty"></img></span>
我想通过添加src属性来获取图片,并通过设置高度和宽度将其缩小。我该怎么做?
.img-dollar
{
height:100px;
width: 100px
}
img{
width: 200px;
height: 200px;
}
.wrapper{
width: 200px;
height: 200px;
}
.wrapper img{
width: 100%;
height: auto;
}
您可以使用图像作为背景,伪造src属性,例如:
.img{
width: 200px;
height: 200px;
background: /images/image.gif
background-size: 200px 200px /* CSS3 */
}
在CSS中,您无法更改属性,只能基于属性创建规则。
在您的情况下,您可以使用CSS content
属性将URL设置为某些元素的图像或内联Base64编码图像的内容。
更多信息请参见:https://developer.mozilla.org/en-US/docs/Web/CSS/content 和 http://www.w3schools.com/cssref/pr_gen_content.asp
例如:
HTML:
<span class="img-dollar"></span>
<span class="img-royalty"></span>
CSS:
span.img-dollar:before {
content: url(images/dollar.png);
}
span.img-royalty:before {
content: url(images/royalty.png);
}
您不能设置src,但可以使用背景来实现类似的效果。
img-dollar{
width:5px;
height:5px;
background:url(dollar.png);
}
可以和不可以。
以下是一个简单的示例:
$("img.imgNav").hover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "over.png";
$(this).attr("src", src);
},
function() {
var src = $(this).attr("src").replace("over", "");
$(this).attr("src", src);
});
img
{
background-color: #222;
width: 200px;
height: 100px;
}
例如。
要更改HTML元素的任何属性,您需要使用JavaScript或jQuery。
您可以在jQuery中更改图像源,如下所示:
$(document).ready(function(){
$('.img-dollar').attr('src','imgpath/imagename.png');
});
以及类似的代码来更改其他属性
这里我通过纯CSS设置图像的内容和大小:
.img-dollar{
content: url('http://woodgears.ca/box_joint/tiny_box_scale.jpg');
height: 100px;
width: 100px;
}
background:url();
。$('img-dollar').attr('src', 'image.jpg');
。document.getElementById('img-dollar').setAttribute("src", "image.png");
。