Question

我正在尝试将PNG图像作为背景图像显示在HTML页面上，没有任何截止。我一直在尝试使用在线发现的不同简单方法，并阅读Stack Overflow上类似问题的回答，但到目前为止还没有任何工作。图像正在中途切断。我不确定这是我的HTML / CSS或图像大小的问题吗？

<style type="text/css" style="display: none !important;">
    * {
        margin: 0;
        padding: 0;
    }
    body {
        overflow-x: hidden;
    }
    #demo-top-bar {
        text-align: left;
        background: #222;
        position: relative;
        zoom: 1;
        width: 100% !important;
        z-index: 6000;
        padding: 20px 0 20px;
    }
    #demo-bar-inside {
        width: 960px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }
    #demo-bar-buttons {
        padding-top: 10px;
        float: right;
    }
    #demo-bar-buttons a {
        font-size: 12px;
        margin-left: 20px;
        color: white;
        margin: 2px 0;
        text-decoration: none;
        font: 14px "Lucida Grande", Sans-Serif !important;
    }
    #demo-bar-buttons a:hover,
    #demo-bar-buttons a:focus {
        text-decoration: underline;
    }
    #demo-bar-badge {
        display: inline-block;
        width: 302px;
        padding: 0 !important;
        margin: 0 !important;
        background-color: transparent !important;
    }
    #demo-bar-badge a {
        display: block;
        width: 100%;
        height: 38px;
        border-radius: 0;
        bottom: auto;
        margin: 0;
        background: url(https://static1.squarespace.com/static/56fecd9704426225f7725b25/58699484197aea5283447865/59cf2b839f74567b7edf839d/1506750164505/votepledge_comingsoonpage_final_1920.png) no-repeat;
        background-size: 100%;
        overflow: hidden;
        text-indent: -9999px;
    }
    #demo-bar-badge:before, #demo-bar-badge:after {
        display: none !important;
    }

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title> votepledge :) </title>
    <style>
        * { margin: 0; padding: 0; }

        html, body { height: 100%; }

        html { 
            background: url(https://static1.squarespace.com/static/56fecd9704426225f7725b25/58699484197aea5283447865/59cf2b839f74567b7edf839d/1506750164505/votepledge_comingsoonpage_final_1920.png) no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        #page-wrap { width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
        p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }
    </style>
</head>
<body>

Answer 1

这是你想要的吗？

<style type="text/css" style="display: none !important;">
    * {
        margin: 0;
        padding: 0;
    }
    body {
        overflow-x: hidden;
    }
    #demo-top-bar {
        text-align: left;
        background: #222;
        position: relative;
        zoom: 1;
        width: 100% !important;
        z-index: 6000;
        padding: 20px 0 20px;
    }
    #demo-bar-inside {
        width: 960px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }
    #demo-bar-buttons {
        padding-top: 10px;
        float: right;
    }
    #demo-bar-buttons a {
        font-size: 12px;
        margin-left: 20px;
        color: white;
        margin: 2px 0;
        text-decoration: none;
        font: 14px "Lucida Grande", Sans-Serif !important;
    }
    #demo-bar-buttons a:hover,
    #demo-bar-buttons a:focus {
        text-decoration: underline;
    }
    #demo-bar-badge {
        display: inline-block;
        width: 302px;
        padding: 0 !important;
        margin: 0 !important;
        background-color: transparent !important;
    }
    #demo-bar-badge a {
        display: block;
        width: 100%;
        height: 38px;
        border-radius: 0;
        bottom: auto;
        margin: 0;
        background: url(https://static1.squarespace.com/static/56fecd9704426225f7725b25/58699484197aea5283447865/59cf2b839f74567b7edf839d/1506750164505/votepledge_comingsoonpage_final_1920.png) no-repeat;
        background-size: 100%;
        overflow: hidden;
        text-indent: -9999px;
    }
    #demo-bar-badge:before, #demo-bar-badge:after {
        display: none !important;
    }

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title> votepledge :) </title>
    <style>
        * { margin: 0; padding: 0; }

        html, body { height: 100%; }

        html { 
            background: url(https://static1.squarespace.com/static/56fecd9704426225f7725b25/58699484197aea5283447865/59cf2b839f74567b7edf839d/1506750164505/votepledge_comingsoonpage_final_1920.png) no-repeat center center fixed; 
            background-repeat: no-repeat;
            background-size: 100vw 100vh;
            background-attachment: fixed;
            height: 40em;
            margin-top: 0;
            padding: 0;
           }            
  

        #page-wrap { width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
        p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }
    </style>
</head>
<body>

Answer 2

您可以通过多种不同方式定义background-size。这是两个例子

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

html {
  background: url(https://static1.squarespace.com/static/56fecd9704426225f7725b25/58699484197aea5283447865/59cf2b839f74567b7edf839d/1506750164505/votepledge_comingsoonpage_final_1920.png) no-repeat center center fixed;
  background-size: contain;
}

#page-wrap {
  width: 400px;
  margin: 50px auto;
  padding: 20px;
  background: white;
  -moz-box-shadow: 0 0 20px black;
  -webkit-box-shadow: 0 0 20px black;
  box-shadow: 0 0 20px black;
}

p {
  font: 15px/2 Georgia, Serif;
  margin: 0 0 30px 0;
  text-indent: 40px;
}

<!DOCTYPE html>
<html>

<head>
  <title> votepledge :) </title>

</head>

<body></body></html>

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

html {
  background: url(https://static1.squarespace.com/static/56fecd9704426225f7725b25/58699484197aea5283447865/59cf2b839f74567b7edf839d/1506750164505/votepledge_comingsoonpage_final_1920.png) no-repeat center center fixed;
  background-size: 100% 100%;
}

#page-wrap {
  width: 400px;
  margin: 50px auto;
  padding: 20px;
  background: white;
  -moz-box-shadow: 0 0 20px black;
  -webkit-box-shadow: 0 0 20px black;
  box-shadow: 0 0 20px black;
}

p {
  font: 15px/2 Georgia, Serif;
  margin: 0 0 30px 0;
  text-indent: 40px;
}

<!DOCTYPE html>
<html>

<head>
  <title> votepledge :) </title>

</head>

<body></body></html>

首先确保所有图像都显示在右侧resolution;第二个将拉伸图像以覆盖x和y轴的位置，因此我的图像看起来不合时宜。

这是CSS Reference Guide

Answer 3

当您使用background-size: cover;时，您正在拉伸图像以覆盖要应用样式类的整个元素（在本例中为html标记）。因为图像保持其原始的比例，所以图像的顶部和底部的一些可能不可见。尝试使用其他background-size选项，例如contain或auto，但请注意，您现在无法覆盖背景的左侧和右侧。您可以使用background-repeat-x: repeat以某种方式修复它。

也许这是一种有用的方法：

html { 
        background: url(https://static1.squarespace.com/static/56fecd9704426225f7725b25/58699484197aea5283447865/59cf2b839f74567b7edf839d/1506750164505/votepledge_comingsoonpage_final_1920.png) repeat center center fixed; 
        -webkit-background-size: auto;
        -moz-background-size: auto;
        -o-background-size: auto;
        background-size: auto;
    }

注意我确实在no-repeat定义中将repeat更改为background。

我建议您阅读W3Schools CSS Backgrounds页面并使用css样式进行一些演示，以便找到更适合您的解决方案。

背景图像被切断

3 个答案: