weixin_50648496 2022-03-15 15:52 采纳率: 100%
浏览 23
已结题

在div中通过background-image，background-position，background-size属性获取一张图的部分，div中不显示

在div中通过div元素选择器一次性给URL图和通过类选择器一次一次给URL图为什么使用background-image，background-position，background-size属性获取一张图的部分，div中显示结果不一样？类选择器一次一次给URL图在div中通过background-image，background-position，background-size属性获取一张图的部分，div中不显示。

我想要达到的结果

img

写出的代码截图

img

img

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-03-15 16:20
    关注
    圈出来的background-position样式中的100px全部改为-100px，方向搞错了

    img


    改下面就行了

    img

    <!doctype html>
<style>
    div {
        background-image: url(https://zy.forerunnercollege.com/log200.png);
        background-repeat: no-repeat;
        background-size: 200px 200px;
        width: 100px;
        height: 100px
    }

    .div1 {
        background-position: 0 0;
    }

    .div2 {
        background-position: -100px 0;
    }

    .div3 {
        background-position: 0 -100px;
    }

    .div4 {
        background-position: -100px -100px;
    }
</style>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

  • css3实现一个div设置多张背景图片及background-image属性实例演示
    2020-09-27 21:33
    在CSS3中，`background-image`属性极大地扩展了对背景图片处理的能力，使得在一个单一的HTML元素（如div）上设置多个背景图片成为可能。这个特性显著提高了网页设计的灵活性和创意性，减少了以往需要通过嵌套div来...
  • vue的style绑定background-image的方式和其他变量数据的区别详解
    2020-10-18 02:51
    总的来说，在Vue.js中，我们通过v-bind:style指令来动态绑定样式，对于background-image属性和其他属性如background-repeat、background-position、background-size等，需要注意它们在使用和绑定时的不同之处。通过...
  • css中background-size属性使用介绍
    2020-09-25 02:03
    在CSS中，`background-size`属性是一个非常重要的样式，它用于控制背景图像的尺寸，从而影响元素背景的显示效果。这个属性允许我们精确地设定背景图像的宽度和高度，或者使用预定义的值来实现特殊效果。以下是关于`...
  • css 之 background-position-x
    2020-10-30 17:30
    css 之 background-position-x 是 CSS 中的一个属性，用于设置背景图片的水平位置。这个属性是 background-position 属性的简写形式，专门用于设置背景图片的水平位置。 背景图片的水平位置是指背景图片左上角相...
  • 利用CSS定位背景图片 background-position
    2020-12-11 18:40
    那么怎么来实现一张图片在不同的地方只显示其中的一部分呢，这就用到了我们今天要说的背景图片的定位问题。这个问题相信很多人都郁闷过，也经常有朋友问我，所以今天就系统的说一下： 我们知道在用图片作为背景的...
  • div的background-image
    2024-10-23 09:03
    m0_68791463的博客 html中设置class为hat，引用css文件中...background-image: url("图片所在在线网址");或者放置于html文件中的div格式，中直接设置style格式也可以。识别得到的是text/html文件类型，且404。换成在线网址即可正常显示。
  • CSS background-color、background-image、background-repeat、background-position、backgroundsize……
    2021-11-10 10:40
    小航哥sir的博客 以下代码均基于一个div盒子作介绍 1. background-color 作用：设置背景颜色 div { width: 200px; height: 200px; /* 1. 直接设置英文 */ /* background-color: pink; */ /* 2. 设置十六进制 */ /* ...
  • CSS中背景图片的属性：background-repeat、background-position、background-size
    2017-05-26 21:18
    xuehyunyu的博客 有三个属性：no-repeat（图片保留自身大小不平铺）、repeat-x（图片在水平方向上平铺）、repeat-y（图片在垂直方向上平铺） 2、background-position：确定图片显示的位置。 background-position: 30px 50px; 图片...
  • 深入解析 CSS `background-image` 属性
    2025-10-06 06:37
    2501_93104808的博客 CSS background-image 属性用于设置元素的背景图像，支持图片、渐变和多层背景叠加。关键点包括：1）通过url()指定图片路径或使用渐变函数；2）支持多背景图层叠加，用逗号分隔；3）需配合background-repeat等属性...
  • background 组合写法_css3实现一个div设置多张背景图片及background-image属性
    2020-12-24 07:12
    浩浩耗的博客 引子以前做网页布局的时候，一个div只能设置一张背景图片，设置多个背景的话，要用多个div嵌套才能实现，这样兼容性比较好。若您的网站要求兼容浏览器低版本，建议用这种方法。css3的出现，解决了一个div只能设置一...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 3月23日
  • 已采纳回答 3月15日
  • 创建了问题 3月15日