css 如何显示部分图片

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

css 如何显示部分图片

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

推荐:《css视频教程》

css如何只显示部分图片?

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

立即学习“前端免费学习笔记(深入)”;

53b303f8541d2fe43397ec014807afe.png

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

2d10808dc0f511778c88e8068448d11.png

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

0181f5d0908b38811d83b680757a0f5.png

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

82ce2c284d658edd8b5179eb6f21fa3.png

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

b48a558737a74c8acc9eac3c16928c3.png

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

16d11141a48c3b0e37236286e13f847.png

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

edeb6eb4375bb58e2c0314958e7193a.png

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

fd257b887a97ec461ef0e4aeaeef42c.png

以上就是css 如何显示部分图片的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2882339.html

(0)
上一篇 2025年3月10日 20:10:09
下一篇 2025年3月10日 20:10:18

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • css样式怎么写在jsp中

    css样式写在jsp中的方法:1、通过内联样式写在jsp中;2、使用“”标签在文档头部定义内部样式表;3、使用“”标签链接到样式表。 本教程操作环境:windows7系统、css3版,该方法适用于所有品牌电脑。 推荐:《css视频教程》 c…

    2025年3月10日
    000
  • css 怎么可以不继承样式

    css不继承样式的实现方法:首先打开相应的代码文件;然后通过覆盖的方式清空样式;接着把不易变化的样式部分抽离出来;最后用组合的方式应用到不同模块即可。 本教程操作环境:windows7系统、css3版,该方法适用于所有品牌电脑。 推荐:《c…

    2025年3月10日
    200
  • css盒子模型尺寸如何计算

    标准盒子模型的尺寸为:“内容的宽高+两侧内边距padding的大小+两侧边框border的大小”;而IE盒子模型的尺寸直接就为:“内容的宽高”,盒子设置的宽/高属性就是盒子自身的整体尺寸,如果带有内边距或边框,则通过缩小内容区域来实现。 本…

    2025年3月10日
    200
  • css行元素跟块元素有哪些相同点

    相同点:1、行元素和块元素都具有display属性,用于规定元素应该生成的框的类型;2、行元素和块元素都可以设置左右水平方向的margin和padding值。 本教程操作环境:windows7系统、css3版本,该方法适用于所有品牌电脑。 …

    2025年3月10日
    200
  • css怎么定义div的宽度和高度

    在css中,可以使用width和height属性来定义div的度度和高度,语法格式“div{width:值;height:值;}”;值可以是用px、cm等单位定义的长度,也可是使用“%”定义的基于包含父元素的百分比长度,或者为“auto”。…

    2025年3月10日
    200
  • css布局之静态布局、自适应布局、流式布局、响应式布局、弹性布局

    (推荐教程:CSS视频教程) 静态布局(Static Layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态…

    2025年3月10日
    200
  • css span标签里text-indent不起作用是什么原因?

    span标签设置text-indent不起作用,是因为text-indent只能给块级元素设置,而span标签是行内元素;解决方法:使用“span{display:inline-block;}”样式将span标签转换为行内块级元素即可。 本…

    2025年3月10日
    200
  • css超链接字体颜色如何改变

    css改变超链接字体颜色的方法:首先新建html文件;然后在“index.html”中的“”标签中,输入css代码为“a{font-family: 楷体;font-size: 20px;color: orange;}”即可。 本教程操作环境…

    2025年3月10日 编程技术
    200
  • css怎么样实现图片圆角

    css实现图片圆角的方法:首先创建一个HTML示例文件;然后创建一个div元素;最后通过css3的“border-radius”属性给元素添加圆角即可。 本教程操作环境:Windows7系统、HTML5&&CSS3版本,该方…

    2025年3月10日 编程技术
    200
  • css实现文字颜色渐变的几种方法

    (推荐教程:CSS视频教程) 在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了。下面就介绍3中实现方式供大家参考! 基础样式: .gradie…

    2025年3月10日
    200

发表回复

登录后才能评论