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

在运行时更改元素的“backgroundimage”会干扰类属性

background-image html javascript

-2

Rewind · 技术社区 · 6 年前

我改变了我的背景 div 在运行时:

 this.style.backgroundImage = "url('./images/back.jpg')";

但是,以前它的类是在css中设置的:

.myMainDiv {width: 100%;height: 100%;min-height: 100vh;background-color: #000000;background-position: center;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}

当我有一张更大的照片时,效果很好。但是,当我缩小背景图片的尺寸以节省一点内存时,它会像应该的那样将图片完全拉伸到屏幕上,但会将图片向下重复3次。

到底是什么导致了这一切?

1 回复 | 直到 6 年前

Oliver Trampleasure 6 年前

此代码按您的需要工作(如果不更新,背景将是灰色占位符)。图像质量很差,因为我要求它只有120px的正方形。

我也改变了 .myMainDiv 以确保其高度大于占位符,并设置 width: 120px; 确保占位符在以下情况下垂直重复: background-repeat: no-repeat; 不起作用。

更新所有样式都存储在一个字符串中,这样您就可以通过JS在需要时应用它。这将覆盖特定于该元素的所有其他CSS样式(但不是来自类等的样式),因此您需要稍微小心一点。

cssAllStyles = "min-height: 100vh; background-color: #000000; background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;"


var elements = document.getElementsByClassName('myMainDiv');
var requiredElement = elements[0];

requiredElement.style.cssText = cssAllStyles + "background-image: url('https://placeimg.com/120/120/any')";

.myMainDiv {
  width: 120px;
  height: 300px; 
  background-image: url('"https://via.placeholder.com/150');
 }

<div class="myMainDiv"></div>

推荐文章

Vida Khalili · 如何在Nextjs中设置背景图像?

2 年前

Laiqa Mohid · 反应-在使用SVG作为背景图像属性中的数据时,尝试将SVG填充颜色作为道具传递?

3 年前

user8076620 · javascript如何使用style属性查找包含背景图像的元素

7 年前

h2odev · 在具有动态宽度的div元素上调整背景图像

7 年前

Chris · 如何使用CSS缩放手机背景图像?

7 年前

Chris McCarthy · 如何在matplotlib雷达图中添加轮盘赌背景图像

7 年前

Fahim Parkar · UITextView背景图像正在滚动多行

7 年前

Polygami · 保持图像居中,同时保持100%的高度,仅延伸/裁剪侧面

7 年前

AlphaX · 如何交换透明背景图像

7 年前

TJ1 · 更改圆的背景图像

7 年前