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

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

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

  1. .carousel {
  2.   position: relative;
  3.   width: 50rem;
  4.   height: 50rem;
  5.   margin-top: 12.5vh;
  6.   border-radius: 0.25rem;
  7.   box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  8.   margin-bottom: 200vh;
  9. }
  11. .slide {
  12.   background-repeat: no-repeat;
  13.   
  14.   background-attachment: fixed; 
  15.   background-position: center;
  16.   /*
  17. 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 */
  19.   position: absolute;
  20.   height: 100%;
  21.   width: 100%;
  22.   border-radius: inherit;
  23. }
  25. .current {
  26.   background-image: url("https://daimarubesso.com/assets/image/top/top_visual1_1.jpg");
  27. }
  29. .current.shrink {
  30.   width: 0;
  31.   transition: all 600ms cubic-bezier(0.30005, 0.25, 0.05, 1);
  32. }
  34. .future {
  35.   background-image: url("https://daimarubesso.com/assets/image/top/top_visual1_2.jpg");
  36. }
  1. <center>
  2.   <div class="carousel">
  3.     <div class="slide future"></div>
  4.     <div class="slide current"></div>
  5.   </div>
  6. </center>
  1. const images = [
  2.   "https://daimarubesso.com/assets/image/top/top_visual1_1.jpg",
  3.   "https://daimarubesso.com/assets/image/top/top_visual1_2.jpg",
  4.   "https://daimarubesso.com/assets/image/top/top_visual1_3.jpg",
  5.   "https://daimarubesso.com/assets/image/top/top_visual1_4.jpg",
  6.   "https://daimarubesso.com/assets/image/top/top_visual1_5.jpg",
  7.   "https://daimarubesso.com/assets/image/top/top_visual1_6.jpg",
  8.   "https://daimarubesso.com/assets/image/top/top_visual1_7.jpg",
  9.   "https://daimarubesso.com/assets/image/top/top_visual1_8.jpg",
  10.   "https://daimarubesso.com/assets/image/top/top_visual1_9.jpg",
  11.   "https://daimarubesso.com/assets/image/top/top_visual1_10.jpg"
  12. ];
  13. var currentImgIndex = 0;
  14. var futureImgIndex = 1;
  16. function switchBackground() {
  17.   $('.current').toggleClass('shrink'); // slide the image to the left
  19.   setTimeout(() => { // after sliding is done and we cant see the old image; switch the currentImage with the one that was the background image.
  20.     currentImgIndex = (currentImgIndex + 1) % images.length;
  21.     futureImgIndex = (futureImgIndex + 1) % images.length;
  23.     $('.current').css('background-image', 'url("' + images[currentImgIndex] + '")');
  24.     $('.future').css('background-image', 'url("' + images[futureImgIndex] + '")');
  26.     $('.current').toggleClass('shrink'); // reset the sliding animation after the new image is set
  27.   }, 600); // image switch is delayed 600ms because the sliding animation takes that long
  28. }
  30. 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 -->

  1. .carousel {
  2.   position: relative;
  3.   width: 50rem;
  4.   height: 50rem;
  5.   margin-top: 12.5vh;
  6.   border-radius: 0.25rem;
  7.   box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  8.   margin-bottom: 200vh;
  9. }
  11. .slide {
  12.   background-repeat: no-repeat;
  13.   
  14.   background-attachment: fixed; 
  15.   background-position: center;
  16.   /*
  17. 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 */
  19.   position: absolute;
  20.   height: 100%;
  21.   width: 100%;
  22.   border-radius: inherit;
  23. }
  25. .current {
  26.   background-image: url(&quot;https://daimarubesso.com/assets/image/top/top_visual1_1.jpg&quot;);
  27. }
  29. .current.shrink {
  30.   width: 0;
  31.   transition: all 600ms cubic-bezier(0.30005, 0.25, 0.05, 1);
  32. }
  34. .future {
  35.   background-image: url(&quot;https://daimarubesso.com/assets/image/top/top_visual1_2.jpg&quot;);
  36. }

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

  1. &lt;center&gt;
  2.   &lt;div class=&quot;carousel&quot;&gt;
  3.     &lt;div class=&quot;slide future&quot;&gt;&lt;/div&gt;
  4.     &lt;div class=&quot;slide current&quot;&gt;&lt;/div&gt;
  5.   &lt;/div&gt;
  6. &lt;/center&gt;

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

  1. const images = [
  2.   &quot;https://daimarubesso.com/assets/image/top/top_visual1_1.jpg&quot;,
  3.   &quot;https://daimarubesso.com/assets/image/top/top_visual1_2.jpg&quot;,
  4.   &quot;https://daimarubesso.com/assets/image/top/top_visual1_3.jpg&quot;,
  5.   &quot;https://daimarubesso.com/assets/image/top/top_visual1_4.jpg&quot;,
  6.   &quot;https://daimarubesso.com/assets/image/top/top_visual1_5.jpg&quot;,
  7.   &quot;https://daimarubesso.com/assets/image/top/top_visual1_6.jpg&quot;,
  8.   &quot;https://daimarubesso.com/assets/image/top/top_visual1_7.jpg&quot;,
  9.   &quot;https://daimarubesso.com/assets/image/top/top_visual1_8.jpg&quot;,
  10.   &quot;https://daimarubesso.com/assets/image/top/top_visual1_9.jpg&quot;,
  11.   &quot;https://daimarubesso.com/assets/image/top/top_visual1_10.jpg&quot;
  12. ];
  13. var currentImgIndex = 0;
  14. var futureImgIndex = 1;
  16. function switchBackground() {
  17.   $(&#39;.current&#39;).toggleClass(&#39;shrink&#39;); // slide the image to the left
  19.   setTimeout(() =&gt; { // after sliding is done and we cant see the old image; switch the currentImage with the one that was the background image.
  20.     currentImgIndex = (currentImgIndex + 1) % images.length;
  21.     futureImgIndex = (futureImgIndex + 1) % images.length;
  23.     $(&#39;.current&#39;).css(&#39;background-image&#39;, &#39;url(&quot;&#39; + images[currentImgIndex] + &#39;&quot;)&#39;);
  24.     $(&#39;.future&#39;).css(&#39;background-image&#39;, &#39;url(&quot;&#39; + images[futureImgIndex] + &#39;&quot;)&#39;);
  26.     $(&#39;.current&#39;).toggleClass(&#39;shrink&#39;); // reset the sliding animation after the new image is set
  27.   }, 600); // image switch is delayed 600ms because the sliding animation takes that long
  28. }
  30. 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
  • codepen
  • css
  • css-transitions
  • html
  • javascript
匿名

发表评论

匿名网友

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

确定