时间戳

首页 > 解决方案 > 方向横向时背景位置不起作用

css - 方向横向时背景位置不起作用

问题描述

我使用 SVG 作为背景图像background-size:cover。下图显示了目前的情况：

在此处输入图像描述

我想将红色矩形始终放在我网站实际内容的左侧。我尝试使用媒体查询来控制背景位置，不幸的是它在媒体查询中不起作用orientation: landscape。但是，正确应用了绿色。（请注意，我同时使用了 Chrome 和 Firefox 开发工具来测试媒体查询，结果是相同的）。

是否有可能纠正这种行为？如果不是，你会建议什么策略来实现我的目标？

html代码：

<html>
    <head>
        <link rel="stylesheet" href="index.css" />
        <title>Test</title>
    </head>
    <body>
    <div id="home-page">
    <div class="hp-content">
        <div class="welcome">Welcome to</div>
        <div class="site">
            <div>My</div>
            <div>Super Duper Website</div>
        </div>
        <div class="tag">
            <span>Tag 1</span>
            <span>Tag 2</span>
        </div>
    </div>
    </div>
    </body>
</html>

索引.css：

#home-page {
    position: relative;
    background-image: url("test2.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: 0;
    height:100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    perspective: 500px;
}

.hp-content {
    text-align: center;
}

.welcome {
    font-size: 20px;
}

.site {
    font-size: 40px;
    font-weight: bold;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .site {
        color: blue;
    }
    
    #home-page {
        background-position-x: 45%;
    }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .site {
        color: green;
    }
    
    #home-page {
        background-position-x: 30%;
    }
}

test2.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   style="isolation:isolate"
   viewBox="0 0 5333 3000"
   width="5333pt"
   height="3000pt"
   version="1.1"
   id="svg897"
   sodipodi:docname="test2.svg"
   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
  <metadata
     id="metadata901">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1920"
     inkscape:window-height="983"
     id="namedview899"
     showgrid="false"
     inkscape:zoom="0.199"
     inkscape:cx="3555.3333"
     inkscape:cy="2000"
     inkscape:window-x="0"
     inkscape:window-y="24"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg897" />
  <defs
     id="defs889">
    <clipPath
       id="_clipPath_T82IRtemKzxS24oK6qpn3KBJWLS4PYGV">
      <rect
         width="5333"
         height="3000"
         id="rect886" />
    </clipPath>
  </defs>
  <g
     clip-path="url(#_clipPath_T82IRtemKzxS24oK6qpn3KBJWLS4PYGV)"
     id="g895">
    <rect
       x="1561"
       y="400"
       width="405"
       height="2309"
       transform="matrix(1,0,0,1,0,0)"
       fill="rgb(255,0,0)"
       id="rect891" />
    <path
       d=" M 0 1080 L 0 3000 L 5333 3000 L 5333 1827 L 1849 2605 L 0 1080 Z "
       fill="rgb(0,132,35)"
       vector-effect="non-scaling-stroke"
       stroke-width="1"
       stroke="rgb(0,0,0)"
       stroke-linejoin="miter"
       stroke-linecap="square"
       stroke-miterlimit="3"
       id="path893" />
  </g>
</svg>

标签： cssmedia-queries

解决方案

在多个视口和方向中正确定位图像背景可能很困难。一种可能的策略是使用 CSS 形状来实现效果，您可以更好地控制放置。这是一种可能的解决方案，可以快速修改各个元素。

            body {
                margin: 0;
                position: relative;
            }

            #home-page {
                position: relative;
                height: 100vh;
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                perspective: 500px;
            }

            .hp-content {
                text-align: center;
            }

            .welcome {
                font-size: 20px;
            }

            .site {
                font-size: 40px;
                font-weight: bold;
            }

            #triangle-bottom-left {
                width: 0;
                height: 0;
                border-bottom: 38vw solid green;
                border-right: 80vh solid transparent;
                position: absolute;
                bottom: 0;
                left: 0;
            }

            #triangle-bottom-right {
                width: 0;
                height: 0;
                border-bottom: 25vw solid green;
                border-left: 135vh solid transparent;
                position: absolute;
                bottom: 0;
                right: 0;
            }

            #vertical-column-element {
                width: 4em;
                height: 35vh;
                background-color: red;
                position: absolute;
                bottom: 0;
                left: 20vw;
            }

            @media (min-width: 768px) and (max-width: 1024px) {
                .site {
                    color: blue;
                }

                #triangle-bottom-left {
                    border-bottom: 38vw solid green;
                    border-right: 80vh solid transparent;
                }

                #triangle-bottom-right {
                    border-bottom: 25vw solid green;
                    border-left: 135vh solid transparent;
                }

                #vertical-column-element {
                    width: 6em;
                    height: 66vh;
                    left: 10vw;
                }
                
            }
            @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
                .site {
                    color: green;
                }

                #triangle-bottom-left {
                  border-bottom: 38vw solid green;
                  border-right: 80vh solid transparent;
                }

                #triangle-bottom-right {
                  border-bottom: 25vw solid green;
                  border-left: 135vh solid transparent;
                } 

                #vertical-column-element {
                    width: 6em;
                    height: 75vh;
                    left: 15vw;
                }
                
            }
            @media (min-width: 1025px) and (orientation: landscape) {
                .site {
                    color: orange;
                }

                #triangle-bottom-left {
                  border-bottom: 38vw solid green;
                  border-right: 80vh solid transparent;
                }

                #triangle-bottom-right {
                  border-bottom: 25vw solid green;
                  border-left: 135vh solid transparent;
                } 

                #vertical-column-element {
                    width: 6em;
                    height: 75vh;
                    left: 15vw;
                }

            }
    <div id="home-page">
        <div class="hp-content">
            <div class="welcome">Welcome to</div>
            <div class="site">
                <div>My</div>
                <div>Super Duper Website</div>
            </div>
            <div class="tag">
                <span>Tag 1</span>
                <span>Tag 2</span>
            </div>
        </div>
            <div id="vertical-column-element"></div>
            <div id="triangle-bottom-left"></div>
            <div id="triangle-bottom-right"></div>
    </div>

推荐阅读