background-image 相关问题

我在背景中设置了，并添加了关键帧来循环浏览图像。我的目标是使用这些来创建精益循环动画，但我无法阻止背景图像的重复... 我在背景中设置了 <li>，并添加了关键帧来循环浏览图像。我的目标是使用这些来创建精益循环动画，但我无法阻止背景图像重复。有一张图像我无法控制，而下面的一张图像的大小和位置正确。如有任何帮助，我们将不胜感激。 .cb-slideshow span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size:cover; background-position: 50% 50%; opacity: 0; z-index: 0; animation: imageAnimation 8s linear infinite 0s; background-repeat: no-repeat; } .cb-slideshow li:nth-child(1) span { background-image: url(../images/1.jpg) } .cb-slideshow li:nth-child(2) span { background-image: url(../images/2.jpg); animation-delay: 1s; } .cb-slideshow li:nth-child(3) span { background-image: url(../images/3.jpg); animation-delay: 2s; } .cb-slideshow li:nth-child(4) span { background-image: url(../images/4.jpg); animation-delay: 3s; } .cb-slideshow li:nth-child(5) span { background-image: url(../images/5.jpg); animation-delay: 4s; } .cb-slideshow li:nth-child(6) span { background-image: url(../images/6.jpg); animation-delay: 5s; } .cb-slideshow li:nth-child(7) span { background-image: url(../images/7.jpg); animation-delay: 6s; } .cb-slideshow li:nth-child(8) span { background-image: url(../images/8.jpg); animation-delay: 7s; } @keyframes imageAnimation { 0% { opacity: 0 } 0.1% { opacity: 1 } 12.5% { opacity: 1 } 12.6% { opacity: 0 } 100% { opacity: 0 } } .no-cssanimations .cb-slideshow li span{ opacity: 1; } <ul class="cb-slideshow"> <li> <span><img src="Images/1.jpg" ></span> </li> <li> <span><img src="Images/2.jpg" ></span> </li> <li> <span><img src="Images/3.jpg" ></span> </li> <li> <span><img src="Images/4.jpg" ></span> </li> <li> <span><img src="Images/5.jpg" ></span> </li> <li> <span><img src="Images/6.jpg" ></span> </li> <li> <span><img src="Images/7.jpg" ></span> </li> <li> <span><img src="Images/8.jpg" ></span> </li> </ul> 您可以使用CSS属性background-repeat: no-repeat;来防止图像重复。

html css background-image css-animations

回答 1 投票 0

给定这种图像，我怎样才能实现像CSS中那样的背景？

我刚刚学习HTML和CSS。所以，我得到了一个设计，但我不知道如何设计背景图像部分，因为有两个非常大的背景图像。这是设计并使用

html css frontend background background-image

回答 1 投票 0

使用 CSS 计算 Chrome Android 上的视口高度

所以我注意到移动Chrome将地址栏计算到视口高度中。因此，在元素上使用 height: 100vh 不起作用，因为当地址栏滚动视口时

css google-chrome mobile background-image viewport

回答 3 投票 0

如何使用CSS来实现这个边框效果

第一：资源背景图片（PNG）：https://i.imgur.com/pyYfyit.png （SVG）：https://jmp.sh/s/emDkCSycZ7dfNoAOODAb 第二个效果（蓝色部分宽度不确定）：资源背景图片 ...

css background-image mask clip-path

回答 1 投票 0

有办法为css中使用的图像设置默认目录吗？

我有一个 css 文件，出于组织原因，该文件位于图像所在的另一个目录中。问题是我总是最终像这样设置所有背景图像：background-ima...

css background-image

回答 6 投票 0

如何制作这个背景

我正在 Bootstrap 5 中编写一个网站，但我不知道如何正确制作这个背景（https://postimg.cc/xJymRpVf）。有人能帮助我吗？这是我的部分的代码。我正在 Bootstrap 5 中编写一个网站，但我不知道如何正确制作这个背景（https://postimg.cc/xJymRpVf）。有人可以帮我吗？这是我的部分的代码。 <section class="py-5"> <div class="container"> <div class="row justify-content-center"> <div class="col-lg-9 col-12 py-5"> <h2 class="fw-bold text-blue">Přidejte se mezi úspěšné franšízové sítě </h2> <p class="mt-4">Čekáte, až si Vás franšízanti sami najdou? Máme bohaté zkušenosti s akvizicí franšízantl pro úspěšné sítě a rozvíjíme také jejich obchodní strategii.</p> </div> </div> <div class="row justify-content-center"> <div class="col-lg-9 col-12 mb-3"> <p class="h4 fw-bold text-blue">Síť tradičního holičství na 15 místech</p> </div> </div> <div class="row justify-content-center"> <div class="col-lg-9 col-12"> <div class="row"> <div class="col-lg-6 col-12"> <img src="img/barber.jpg" class="img-fluid"> </div> <div class="col-lg-6 col-12"> <div class="card radius-bottom bg-primary p-4 text-white h-100 d-flex justify-content-center"> <p class="h5 fw-bold">Royal Barber & Shop</p> <ul class="small"> <li>Tvoříme obchodní strategii</li> <li>Hledáme motivované franšízanty</li> <li>Spuštěné on-line kampaně k propagaci</li> </ul> <p class="fw-bold">15 poboček, 1 000 zákazníků</p> </div> </div> </div> <div class="col-12 text-center mt-5"> <a href="#" class="btn btn-lg bg-success rounded-pill text-white fw-bold px-5">Pojďme spolupracovat</a> </div> </div> </div> </div> </section> 我不知道如何正确地做到这一点：/ 这是一个图像如果您可以访问包含背景图像的网站，您可以从检查中获取它作为 URL 不幸的是，这是一个图形设计，我必须编码

css twitter-bootstrap background background-image bootstrap-5

回答 2 投票 0

有没有办法制作Safari专属的背景图片？

我的 Tumblr 博客现在使用带有背景附件的背景图像：fixed它在 Windows 和 Android 上完美运行但是，根据 caniuse.com（文章链接），此属性适用于...

background background-image mobile-safari background-color background-attachment

回答 1 投票 0

SVG 圆圈中的背景图像，定位图像并将图像紧贴到圆圈中，尽管宽度/高度未知

svg background-image

回答 3 投票 0

flutter 启动画面问题总是先显示 flutter 启动画面，然后只有应用程序启动画面有效，使用了 flutter_native_splash 库但没有用

flutter 启动画面问题总是先显示 flutter 启动画面，然后只有应用程序启动画面可以工作，使用 flutter_native_splash 库，但没有使用我的启动画面包含带渐变的背景图像...

flutter dart background-image android-splashscreen react-native-splash-screen