HTML页面中的奇怪行为

Question

我正在编写一个Web应用程序，我的应用程序遇到了奇怪的行为。

基本上，我设置了background-image，网站width继续传递图片length。

这是一个版画屏幕：

我该怎么做才能纠正这个问题？

我用这一行设置背景：

<header style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(<?php echo base_url('assets/pagina_voluntario.jpg');?>);">
        <div class="header-content">
            ...
        </div>
    </header>

Answer 1

background-image的默认行为是以正常大小显示图像一次。如果视口最终大于背景图像，则图像将不会缩放或重复。

这可以通过background-size: cover修复，这使得背景＆＃34;覆盖＆＃34;整个空间不会扭曲背景图像的比例。

所以你要像这样设置背景图像的大小：

background-image: url(http://...);
background-size: cover;

并非所有浏览器都支持CSS中的封面属性（例如旧版IE和旧版Safari），但我一直回到可以在现代（可能更高效）{{1}之前添加的回退方法方法所以它不会在旧版浏览器上完全失败：

cover

（参见原始答案here）