代码之家 › 专栏 › 技术社区 › SmugSnail

如何将背景图像移到右侧(当已经有另一个背景图像时)?

css html

SmugSnail · 技术社区 · 3 年前

我试图在标题的右侧获得背景图像,但当我使用: background-position: right; 或 float: right; 然后它什么都不做,我不确定当它们都在同一个类中时,是否有可能在css中专门设计一个背景图像的样式。

(左边的图片很好,只是一个例子,说明它有多个背景)

https://jsfiddle.net/qeysvr6c/82/

/* Using example images, since I don't know how to add patterns into jsfiddle without having to download them */

.h1_content {
  background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg) no-repeat;  /* pattern for the header, left magnifying glass */ 
  background-size: 4%;
  background-color: #00a8f3;
  color: white;
}

.h1_content::after {
  content: "";
  background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg);
  background-position: right;  /* Doesn't go right? */
  background-repeat: no-repeat;
  position: absolute;
  background-size: cover;
  width: 50px;
  height: 50px;
}

<article class="text_bottom">
        <section class="section_test">
          <h1 class="h1_content">Topic here</h1>
          <p>Random text here</p>
        </section>
        </article>

2 回复 | 直到 3 年前

admcfajn 3 年前

添加 position:relative 指向标题和 right:0 到 :after psuedo元素。自从 :之后 是 position:absolute 它将停靠到相对父对象的位置。

还有其他方法可以用一个元素来实现这一点,例如使用多个背景图像。但这应该能奏效。

/* Using example images, since I don't know how to add patterns into jsfiddle without having to download them */

.h1_content {
  background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg) no-repeat;  /* pattern for the header, left magnifying glass */ 
  background-size: 4%;
  background-color: #00a8f3;
  color: white;
  position: relative;
}

.h1_content::after {
  content: "";
  background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg);
  background-position: right;  /* Doesn't go right? */
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  background-size: cover;
  width: 50px;
  height: 50px;
}

<article class="text_bottom">
        <section class="section_test">
          <h1 class="h1_content">Topic here</h1>
          <p>Random text here</p>
        </section>
        </article>

Mark Wasfy 3 年前

::after pesudo元素没有足够的宽度向右移动,因此如果给它留出空间,它将被推到右侧,背景大小应为50px或contain,以保持其比例:

.h1_content::after {
    content: "";
    background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg);
    background-repeat: no-repeat;
    background-position: right;
    position: absolute;
    background-size: contain;
    width: 85%;
    height: 50px;
  }

或者只需给出父元素的相对位置,子元素就应该有权:0:

.h1_content::after {
    content: "";
    background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg);
    background-repeat: no-repeat;
    background-position: right;
    position: absolute;
    right: 0;
    background-size: cover;
    width: 50px;
    height: 50px;
  }