繁体   English   中英

如何使背景图像以随机位置重复

how to make background-image repeated with random position

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

晚上,伙计们,我已经使用背景图像了好几次,我发现了一些我想尝试的东西,我们如何在CSS中使用背景重复来制作随机位置图像,我的意思是我可以使重复图像就很好了,而且非常容易但是当我想随机重复我的图像时,我还不太想办法。 所以这是我的问题:

  1. 首先,我们真的可以使图像随机地重复吗? 不会用多张图片或其他任何内容更改图片,而只是在不同位置随机重复一张图片

  2. 第二,如何使用CSS做到这一点?

    供参考,我已经尝试了几种解决方案,但仍然无法解决:

随机CSS背景图片

CSS:随机分布的背景图片?

如果您感到困惑,例如,我想使云只随机出现,只有1张图像,如下所示:(请看一下小云)

https://drive.google.com/file/d/1ubOBFNLpDLHpyoZKEpv4KKzeINpqzshi/view?usp=sharing

我们真的可以做到吗? 因为如果我们只使用background-repeat重复它,我会发现它不好

1 个回复

我可以说有两种方法可以做到这一点,但是在这里您将不会使用background-repeat属性。 以下说明正在考虑问题中提到的云示例。

方法1:

  1. 根据您的选择设置背景颜色
  2. 为html写一些图像或图标(看起来不错)。
  3. 使用CSS使它们的位置相对或绝对(基于这些图标将要使用的其他内容)。 怎么做?
  4. 使用相对和绝对定位的top, bottom, left, right属性将它们定位在网页中您需要的任何位置。
  5. 如果需要在后台拍摄所有这些图像或图标,请使用z-index属性。

检查这个例子。

 .one{ position: relative; left: 30px; top:50px; border: 3px solid #73AD21; } .two{ position: relative; left: 100px; top:200px; border: 3px solid #73AD21; } .three{ position: relative; left: 300px; top:100px; border: 3px solid #73AD21; } .four{ position: relative; left: 30px; border: 3px solid #73AD21; } 
 <head><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> </head> <body> <i class="fa fa-home one"></i> <i class="fa fa-home two"></i> <i class="fa fa-home three"></i> <i class="fa fa-home four"></i> <body> 

方法二

  1. 使用Adobe XD或gravit Designer等工具设计背景图像,然后直接在网页中使用它。
1 如何停止移动背景图像位置

我有背景图片,通过使用小的JavaScript代码,它从右向左移动。 HTML代码 Javascript代码 但我注意到,随着时间的推移我的PC CPU内存使用量增加了! 导致我的电脑过载,如果我禁用了javascript代码,它恢复正常。 我的问题 所以我认 ...

2 如何使用背景图像正确定位?

我想为我的 h1 使用自定义下划线,我决定最好的方法是使用属性: background-image 。 一切都很顺利,直到我需要将背景放在我的h1正下方(Ce e asta?)。 我可以绕 X 轴移动图像,但是当我尝试绕 Y 轴移动图像时,图像就会消失。 这是一个捕获 在互联网上搜索了答案, ...

2019-07-21 15:22:37 2 71   html/ css
3 如何使背景图像响应

如何使#img-alfa图片具有响应性? 我已经尝试过background-size:100% auto; 如果我删除background-image的width和height ,它将完全消失。 .img-responsive { width: 100%; vertical- ...

6 如何使此背景图像响应

我正在尝试使“ Icon_POS_bitmap.png”响应。 如果我在笔记本电脑上查看网站,则图像在底部被切除。 我知道我不能将.hero-slides .single-hero-slides固定在.hero-slides .single-hero-slides高度上。 但是height ...

8 如何使背景图像可访问?

如果您使用内联&lt;img&gt;标记,则可以使用alt=属性和其他aria-*属性来使图像可访问。 但是,如果您使用的是background-image: url(...) ,是否有任何关于如何使此容器易于访问且对屏幕阅读器友好的指南? 是否有要添加到容器的特定属性? ...

10 如何使带有背景图像的div可选?

我的页面中有一张图片,它已作为div的背景加载。 我希望该div与用户进行交流,就好像它是&lt;img scr="..." 。 如何使该div可选? 用户可以轻松选择img但不能选择没有内容的div 。 我尝试了不同的user-selectable值,但它似乎没有以任何方式div。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM