Question

我正在处理一个网页主标题。我想设置一个100%高度的背景图像，并在其前面设置一个大标题。

这是我的做法：

在CSS文件中：

body, html {
  height: 100%;
}

.bg {
  background-image: url("../img/image.JPG");
  height: 100%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;    
}

.bigtitle {
     /**    padding-left:15%;***/ 
        padding-top: 20%;

color: white; 
font-family: 'Trocchi', serif; 
font-size: 1500%; 
font-weight: normal; 
margin: 0;

/*line-height: 1.0em;*/
}

在HTML文件中：

<div class="bg">
    <center><h1 class="bigtitle">My title</h1></center>
</div>

我还尝试使用em设置标题的大小，但这是同样的问题。

这在台式机上很好，但是在移动设备或小屏幕尺寸上完全失败。如何在移动设备和台式机上也能工作？

Answer 1

尝试使用它，我对此没有任何问题，您可以设置所需的高度，并且可以在移动设备和台式机上使用。

.bg {
  background-image: url("../img/image.JPG");
  height: calc(100vh);
  width: auto;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;    
}

Answer 2

减去高度，您的图像将等于背景尺寸：cover;

pragma solidity ^0.5.10;

contract Test {
    mapping (address => bool) public whiteList;
    function addWhitelisted(address _address) public {
        whiteList[_address] = true;
    }
}

https://jsfiddle.net/bw7xmytp/

Answer 3

我只是将其留为评论，但我还没有权限：您可以使用CSS中的媒体查询，根据不同屏幕尺寸的喜好手动调整标题的大小。尽管它们可能不是增加响应能力的最有效方法，但它们为我创造了奇迹。

如何创建在大屏幕和小屏幕上均可使用的大标题？

3 个答案: