【问题标题】:Align/position header image background correctly正确对齐/定位标题图像背景
【发布时间】:2020-08-08 12:31:44
【问题描述】:

我目前正在处理一个网站,但在主标题区域中对齐/定位背景图像时遇到问题。

我希望在那里可以完全看到图像。当我缩小到网站的移动版本时,我希望它也能正常工作。

这里是问题的截图,图片刚好居中(我也用过大图):

下面是我的 CSS 代码:

.header-six .header-t {
    padding: 30px 0;
    text-align: center;
    background-image: url("/image.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

【问题讨论】:

    标签: html css image background position


    【解决方案1】:

    你试过background-size: cover吗?

    在 w3schools 上定义为:

    “调整背景图像的大小以覆盖整个容器,即使它必须拉伸图像或从边缘剪掉一点点”

    建议看一下background-size的描述页面,更好地了解如何正确使用它:https://www.w3schools.com/cssref/css3_pr_background-size.asp

    【讨论】:

    • 它确实有效!只需要background-size: coverbackground-position: center 非常感谢:)
    【解决方案2】:
    .header-six .header-t {    
    width: 100%;}
    

    这可能会有所帮助。

    【讨论】:

    • 很遗憾没有效果
    猜你喜欢
    • 1970-01-01
    • 2017-01-18
    • 2016-12-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-20
    • 2017-03-01
    相关资源
    最近更新 更多