可以将背景图像固定在其父元素上吗?

huangapple go评论79阅读模式
英文:

Can I fix a background-image to its parent?

问题

I'm making a carousel/slider and want to center the images. When I use background-position: center; they get stretched when I change the width. Can't figure out how to center the images and not stretch them when changing width.

我正在制作一个轮播/滑块,并希望将图像居中显示。当我使用background-position: center;时,当我更改宽度时,它们会被拉伸。我无法弄清楚如何在改变宽度时将图像居中且不拉伸。

I found out that if I use background-attachment: fixed; and background-position: center; It looks like what I want. But the pictures scroll with the page. How can I fix this?

我发现如果我使用background-attachment: fixed;background-position: center;,它看起来像我想要的样子。但是图片会随着页面滚动。我该如何解决这个问题?

Here's my codepen

这是我的 codepen

.carousel {
  position: relative;
  width: 50rem;
  height: 50rem;
  margin-top: 12.5vh;
  border-radius: 0.25rem;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  margin-bottom: 200vh;
}

.slide {
  background-repeat: no-repeat;
  
  background-attachment: fixed; 
  background-position: center;
  /*
by using these two settings above it looks like how i want. But the scroll is fucked. If i dont use them the shrinking-image stretches/moves */

  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: inherit;
}

.current {
  background-image: url("https://daimarubesso.com/assets/image/top/top_visual1_1.jpg");
}

.current.shrink {
  width: 0;
  transition: all 600ms cubic-bezier(0.30005, 0.25, 0.05, 1);
}

.future {
  background-image: url("https://daimarubesso.com/assets/image/top/top_visual1_2.jpg");
}
<center>
  <div class="carousel">
    <div class="slide future"></div>
    <div class="slide current"></div>
  </div>
</center>
const images = [
  "https://daimarubesso.com/assets/image/top/top_visual1_1.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_2.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_3.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_4.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_5.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_6.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_7.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_8.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_9.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_10.jpg"
];
var currentImgIndex = 0;
var futureImgIndex = 1;

function switchBackground() {
  $('.current').toggleClass('shrink'); // slide the image to the left

  setTimeout(() => { // after sliding is done and we cant see the old image; switch the currentImage with the one that was the background image.
    currentImgIndex = (currentImgIndex + 1) % images.length;
    futureImgIndex = (futureImgIndex + 1) % images.length;

    $('.current').css('background-image', 'url("' + images[currentImgIndex] + '")');
    $('.future').css('background-image', 'url("' + images[futureImgIndex] + '")');

    $('.current').toggleClass('shrink'); // reset the sliding animation after the new image is set
  }, 600); // image switch is delayed 600ms because the sliding animation takes that long
}

setInterval(switchBackground, 4000);

Tried moving the pictures with background-position, tried using <img> tags instead, I'm stuck :c.

尝试使用background-position移动图片,尝试使用<img>标签,但我卡住了 :c.

Every comment appreciated, thanks.

感谢每一个评论,谢谢。

英文:

I'm making a carousel/slider and want to center the images. When I use background-position: center; they get stretched when I change the width. Can't figure out how to center the images and not stretch them when changing width.

I found out that if I use background-attachment: fixed; and background-position: center; It looks like what I want. But the pictures scroll with the page. How can I fix this?

Here's my codepen

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.carousel {
  position: relative;
  width: 50rem;
  height: 50rem;
  margin-top: 12.5vh;
  border-radius: 0.25rem;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  margin-bottom: 200vh;
}

.slide {
  background-repeat: no-repeat;
  
  background-attachment: fixed; 
  background-position: center;
  /*
by using these two settings above it looks like how i want. But the scroll is fucked. If i dont use them the shrinking-image stretches/moves */

  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: inherit;
}

.current {
  background-image: url(&quot;https://daimarubesso.com/assets/image/top/top_visual1_1.jpg&quot;);
}

.current.shrink {
  width: 0;
  transition: all 600ms cubic-bezier(0.30005, 0.25, 0.05, 1);
}

.future {
  background-image: url(&quot;https://daimarubesso.com/assets/image/top/top_visual1_2.jpg&quot;);
}

<!-- language: lang-html -->

&lt;center&gt;
  &lt;div class=&quot;carousel&quot;&gt;
    &lt;div class=&quot;slide future&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;slide current&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/center&gt;

<!-- language: lang-js -->

const images = [
  &quot;https://daimarubesso.com/assets/image/top/top_visual1_1.jpg&quot;,
  &quot;https://daimarubesso.com/assets/image/top/top_visual1_2.jpg&quot;,
  &quot;https://daimarubesso.com/assets/image/top/top_visual1_3.jpg&quot;,
  &quot;https://daimarubesso.com/assets/image/top/top_visual1_4.jpg&quot;,
  &quot;https://daimarubesso.com/assets/image/top/top_visual1_5.jpg&quot;,
  &quot;https://daimarubesso.com/assets/image/top/top_visual1_6.jpg&quot;,
  &quot;https://daimarubesso.com/assets/image/top/top_visual1_7.jpg&quot;,
  &quot;https://daimarubesso.com/assets/image/top/top_visual1_8.jpg&quot;,
  &quot;https://daimarubesso.com/assets/image/top/top_visual1_9.jpg&quot;,
  &quot;https://daimarubesso.com/assets/image/top/top_visual1_10.jpg&quot;
];
var currentImgIndex = 0;
var futureImgIndex = 1;

function switchBackground() {
  $(&#39;.current&#39;).toggleClass(&#39;shrink&#39;); // slide the image to the left

  setTimeout(() =&gt; { // after sliding is done and we cant see the old image; switch the currentImage with the one that was the background image.
    currentImgIndex = (currentImgIndex + 1) % images.length;
    futureImgIndex = (futureImgIndex + 1) % images.length;

    $(&#39;.current&#39;).css(&#39;background-image&#39;, &#39;url(&quot;&#39; + images[currentImgIndex] + &#39;&quot;)&#39;);
    $(&#39;.future&#39;).css(&#39;background-image&#39;, &#39;url(&quot;&#39; + images[futureImgIndex] + &#39;&quot;)&#39;);

    $(&#39;.current&#39;).toggleClass(&#39;shrink&#39;); // reset the sliding animation after the new image is set
  }, 600); // image switch is delayed 600ms because the sliding animation takes that long
}

setInterval(switchBackground, 4000);

<!-- end snippet -->

Tried moving the pictures with background-position, tried using <img> tags instead, I'm stuck :c.

Every comment appreciated, thanks.

答案1

得分: 0

background-attachment: scroll; 的中文翻译为:background-attachment: scroll;

JSFiddle 的中文翻译为:JSFiddle

英文:

Try background-attachment: scroll;:

JSFiddle

huangapple
  • 本文由 发表于 2023年5月21日 04:05:44
  • 转载请务必保留本文链接:https://go.coder-hub.com/76297144.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定