css设置图片样式,css如何设置图片样式

css改变图片形状不用鼠标

1、首先创建一个html文件（本人是使用HBuilder工具，你喜欢用什么就用什么）。

2、然后在html的body下创建一个div.这样比较好结合css完成简单布局和样式。

3。接下来在该div下创建一个按钮和一img.然后设置图片的宽高的初始图片。

4、然后我们添加css代码，简单完成div的样式。包括边框样式，大小，内容居中。

5、然后我们添加js代码，让点击下一张的时候生效。要用到javascript的点击事件，这要用onclick属性，onclick的值就是js中的方法。因为目标是改变img，所以给img标签加上id。

6、在html中添加javascript的值，主要是完成changeImg()方法。changeImg方法主要是改变img标签中src的值，从而起到变换图片的作用。添加了下面的js的内容之后，点击下一张图片就会发生更改了。

7、但是上面的代码到最后一张的时候就会停止，不会跳到最后一张，所以还要加下面的代码才会完成从尾到首的切换，这样一直点都能变换图片，不会有停止了。

相关问答

Q1: CSS中如何给图片标签设置不同的样式

可以有多种方法实现的。比如可以给每个img设置不同的ID：

img id=p1 src="1.jpg"/img id=p2 src="2.jpg"/img id=p3 src="3.jpg"/

style

#p1 {border:1px solid #f00}

#p2 {border:1px solid #0f0}

#p3 {border:1px solid #00f}

/style

或者是不同的class：

img class=p1 src="1.jpg"/img class=p2 src="2.jpg"/img class=p3 src="3.jpg"/

style

.p1 {border:1px solid #f00}

.p2 {border:1px solid #0f0}

.p3 {border:1px solid #00f}

/style

还有一种更灵活的方式，但需要浏览器支持css3：

img src="1.jpg"/img src="2.jpg"/img src="3.jpg"/

style

img:nth-of-type(1) {border:1px solid #f00}

img:nth-of-type(2) {border:1px solid #0f0}

img:nth-of-type(3) {border:1px solid #00f}

/style

这种方法还有多种灵活的处理方式，比如：

img:nth-of-type(odd) 会选择所有单数的图片（第1张、第3张、第5张……）

img:nth-of-type(even) 会选择所有双数的图片（第2张、第4张、第6张……）

img:nth-of-type(2n) 也是选择双数

img:nth-of-type(2n+1) 也是选择单数

img:nth-of-type(3n+1) 从第1张算起每3张取出1张图片（第1张、第4张、第7张……）

img:nth-of-type(5n+3) 从第3张算起每5张取出1张图片（第3张、第8张、第13张……）

除了这个，css还有几十种不同的选择器，你百度搜一下 css选择器 就知道了。

Q2: css中设置图片的属性有哪些

1)背景图片插入:background-image:url(位置及名称); //默认在父级元素内的左上角

2)背景平铺方式:background-repeat:no-repeat; //不平铺

3)背景位置:background-position:right bottom; //横向在右边，纵向在下边，即右下角

center center; //位于中心

center right; //中间靠右

100px 200px; //靠左100 靠上200

4)背景尺寸:background-size:cover/contain/100% 100% 等比例缩放(铺满即可)/包含在里面/按盒子大小缩放

注意:低版本的IE不支持背景尺寸

5)背景显示方式:background-attachment:scroll//随屏幕滚动 fixed//固定在可视区域，注意:此时的位置是相对于可视区域的

　 (fixed:这里有一个兼容性性的问题，在IE6中，只有html和body支持这个属性)

6)在图片设置边距时注意IE6的双倍间距问题:同时有浮动和边距时产生双倍间距!

解决方法: display:inline;//变为行内元素即可