css 显示图片名,css 如何显示部分图片

css显示部分图片的实现方法:首先在html里创建一个div,用来放背景图片的;然后为div添加css样式,并添加背景图片url;最后添加一个“background-position”的样式,并为样式添加适当的负数值即可。

047f9756f493bd3181ec5046fb85dc02.png

本教程操作环境:windows7系统、css3版,该方法适用于所有品牌电脑。

推荐:《css视频教程》

css如何只显示部分图片?

先在html里创建一个div,用来放背景图片的。

a9dcaeb87ebc45307cfe92e4b700f99b.png

为div添加css样式,添加背景图片url。

238aa1aa2439956ca6b40107dd7dc10b.png

刷新页面,可以看到现在是整张图片都显示的。

b733e7d8f8a409fe68b6ed03846f86e9.png

假设我们现在需要只显示图片中人物的头像部分,我们需要修改图片的长度和宽度,设置为头像部分的大小,70元素左右。

364aad70f87d4a937a6caa04488b9bdb.png

然后添加一个background-position的样式,为样式添加适当的值。注意的是这个值是负数的,不同的值会显示图片的不同部分,大家可以调整尝试一下。

57e332e56ab8848f11f24ac80bab80fc.png

重新刷新页面,可以看到现在是只显示了图片上的头像部分了。

02918c02b712c0a41a7cd6c9055764c5.png

如果是图片太大,但容器太小,我们要显示完整的图片,可以使用background-size的样式,如图。

06bc055335ed5c75c6f8274833184335.png

运行页面后,我们的容器上就显示了完整的背景图片了,但对图片进行了缩放的。

546ed8c0c0d0b4ffaa132203b16414fc.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当我们在使用CSS来设置图片时,有时候希望只显示图片的一部分。这可以通过将图片作为背景图设置并使用背景定位属性来实现。 首先,将图片作为背景图使用,可以通过以下CSS代码实现: ```css .my-image { background-image: url("image.jpg"); // 替换为你的图片路径 background-repeat: no-repeat; } ``` 请确保替换`url("image.jpg")`为你想要显示图片路径。 然后,我们可以使用`background-position`属性来控制图片显示区域。该属性接受水平和垂直位置的参数,可以使用具体的像素值或者关键字来设置。例如: ```css .my-image { background-image: url("image.jpg"); // 替换为你的图片路径 background-repeat: no-repeat; background-position: -50px -50px; // 替换为你希望显示的位置 } ``` 在上面的代码中,`background-position: -50px -50px;`将会使图片向左上角移动50个像素,这样图片的一部分会被隐藏。 通过适当调整`background-position`的数值,我们可以控制图片显示的位置。例如,如果希望显示图片的右下角的1/4部分,可以这样设置: ```css .my-image { background-image: url("image.jpg"); // 替换为你的图片路径 background-repeat: no-repeat; background-position: right bottom; // 将图片定位到右下角 background-size: 50% 50%; // 显示图片的1/4 } ``` 在上面的代码中,通过将`background-position`设置为`right bottom`,将图片定位到了右下角。然后,通过设置`background-size`为`50% 50%`,我们可以只显示图片的右下角的1/4部分。 希望以上回答对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值