设置图像作为背景

嗨，伙计我使用这个类来把一个响应图像作为一个div的背景，它运作良好，它是响应。我唯一的问题是图像没有完全显示，我的意思是它是一个大图像，它是居中的，一切都是正确的，除了我看不到图像的顶部和底部，我可以添加什么充分看到这张大图，并保持响应行为？设置图像作为背景

.bg { 
    background-image:url("image local url"); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
}

来源

2016-12-12 sisimh

尝试'background-size：contains' –

这一切都取决于您的HTML和其他CSS。什么是图像和对象的维度？如何使用'.hg'以及该元素具有哪些其他类？ – Peter

@OskarLaska好吧与包含我可以看到只滚动下来的顶部，并且左侧和右侧不再填充div了 – sisimh

您必须将实际的img标签放在正确的图像上并用css隐藏它。事情是这样的：

img { 
    width: 100%; 
    visibility: hidden; 
}

使用这种方法，实际IMG将调整容器到适当的内容，使其总适合的图像，你会得到的背景图像的质量。让我知道这是否工作

来源

2016-12-12 13:05:31

那么，为什么不直接使用图像，如果你打算把它放在div中呢？为什么使用它，隐藏它，然后使它成为背景？ – Pete

因此，您可以在不使用像z-index这样的黑客的情况下正确添加图像的顶部内容。此外，对于滑块库，这是一个非常好的解决方法，因为客户提供的图像通常尺寸（维数）不正确，此解决方法与容器的最大高度和最小高度相结合，将使滑块库响应。这是一个小题目，但这是一个很好的知道'黑客'。 –

再次，为什么不只是使用图像，因为你将不得不将内容放置在不可见图像的顶部，并且添加1个z-index（这不是黑客 - 你的不可见图像是黑客）不是结束如果你知道如何正确使用z-index的话 – Pete

设置图像作为背景

回答

相关问题