Question

我有background-attachment: fixed的背景图片。我想将它的高度设置为比视口的高度小40px。设置background-size: 100%将高度设置为视口的高度。但background-size: 100% calc(100% - 40px);没有做任何事情。

背景实际上是在bootstrap网站上给旋转木马的图像。给出背景图像的图像具有类.items.active。我也在寻找那些不允许calc()功能的浏览器的javascript后备。我不太了解javascript。我尝试了下面的jquery代码：

$(".item.active").css('background-size', '100% 100%').css('background-size', '-=100px -=100px');

但它也行不通。据我所知，我尝试过简单的javascript：

document.getElementsByClassName(".item.active")[0].style.background-size = "100% calc(100%-40px)";

但这也行不通。

Answer 1

这个应该有效。只需删除＆＃34;减去＆＃34;在宽度和高度之间的代码中。

background-size: 100% calc(100% - 40px);

在javaScript中有一个拼写错误：应该是

style.backgroundSize

而不是

style.background尺寸

Answer 2

使用css calc https://css-tricks.com/a-couple-of-use-cases-for-calc/

.item.active {
  width: calc(100% - 100px);
}

Answer 3

尝试以下

var width = $(".item.active").width();//get the width
var height = $(".item.active").height();//get the height

$(".item.active").css('background-size', (width-100)+'px '+(height-100)+'px');//change the size of the background

注意：你的背景需要位于div中间

如何给背景图像提供（100％ - 40px）高度？

3 个答案: