关于CSS中背景图片设置的问题
答案:4 悬赏:20 手机版
解决时间 2021-01-20 05:30
- 提问者网友:缘字诀
- 2021-01-19 13:04
关于CSS中背景图片设置的问题
最佳答案
- 五星知识达人网友:野慌
- 2021-01-19 14:27
设有三个div ,它们的className分别是:div1/div2和div3,分别显示这三个小图片,那么你的css这么写:
.div1{
width:10px;
height:10px;
bacground:url(你的图片链接) 0, 0 no-repeat;
}
.div1{
width:10px;
height:10px;
bacground:url(你的图片链接) -10px, 0 no-repeat;
}
.div2{
width:10px;
height:10px;
bacground:url(你的图片链接) -20px, 0 no-repeat;
}
然后我们再拿其中一个使用另一种方法来写下,你也看看参考下:
.div3{
width:10px;
height:10px;
background-image:url(你的图片链接);
background-position:-20px, 0px;
background-repeat:no-repeat;
}追问这种写法显示第三个图片是正确的,显示第一个图片的写法会同时显示第二和第三张图片,显示第二个图片的写法会同时显示第三张图片。我在火狐浏览器下测试的。追答你知道限制显示的主要属性是什么吗?就是:
width:10px;
height:10px;
这个代表你的div块的大小就是10*10见方,如果显示得不对,只能说你的背景图不标准了!
background-position:-20px, 0px; 第一个值是表示X轴偏移量,是10px,也就是10像素,对吧?如果你没把我的程序抄错,那也就只有背景图不标准一说了!!也就是说,你可以根据你的背景图,来调整这两个数值,直到满意为止。
我这么讲,你可满意?
而且,一般的绘图软件,你都可以采用像素为单位,结合css定位,你可以把绘图软件上的值直接拿来参考。
.div1{
width:10px;
height:10px;
bacground:url(你的图片链接) 0, 0 no-repeat;
}
.div1{
width:10px;
height:10px;
bacground:url(你的图片链接) -10px, 0 no-repeat;
}
.div2{
width:10px;
height:10px;
bacground:url(你的图片链接) -20px, 0 no-repeat;
}
然后我们再拿其中一个使用另一种方法来写下,你也看看参考下:
.div3{
width:10px;
height:10px;
background-image:url(你的图片链接);
background-position:-20px, 0px;
background-repeat:no-repeat;
}追问这种写法显示第三个图片是正确的,显示第一个图片的写法会同时显示第二和第三张图片,显示第二个图片的写法会同时显示第三张图片。我在火狐浏览器下测试的。追答你知道限制显示的主要属性是什么吗?就是:
width:10px;
height:10px;
这个代表你的div块的大小就是10*10见方,如果显示得不对,只能说你的背景图不标准了!
background-position:-20px, 0px; 第一个值是表示X轴偏移量,是10px,也就是10像素,对吧?如果你没把我的程序抄错,那也就只有背景图不标准一说了!!也就是说,你可以根据你的背景图,来调整这两个数值,直到满意为止。
我这么讲,你可满意?
而且,一般的绘图软件,你都可以采用像素为单位,结合css定位,你可以把绘图软件上的值直接拿来参考。
全部回答
- 1楼网友:不甚了了
- 2021-01-19 16:33
有图片 吗 让看一下
- 2楼网友:北方的南先生
- 2021-01-19 15:57
background-position:-10px -10px;
- 3楼网友:胯下狙击手
- 2021-01-19 14:53
CSS精灵……=w=!
下面就是代码,看了一下你对3L的追问
不解说的是什么意思……
你自己把你那张10*30的图改名为:abc.jpg 看效果(注:每个字母单元要10*10的哦,别图片有问题说是代码问题了哦……)
如果有不懂就追问吧……
下面就是代码,看了一下你对3L的追问
不解说的是什么意思……
你自己把你那张10*30的图改名为:abc.jpg 看效果(注:每个字母单元要10*10的哦,别图片有问题说是代码问题了哦……)
如果有不懂就追问吧……
我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
大家都在看
推荐资讯