0

我想创建一个以照片为背景的网页，背景是屏幕宽度的 300%，并且每 33.33333% 有一张居中的响应式照片，因此它可以保持其比例方面。

我的html代码：

    <!DOCTYPE html>
    <html>
    <head>
    <title>aj</title>
    <link href="design.css" rel="stylesheet" type="text/css">

    <body/>
<div id="background"><img src="background.png"/> </div><!--These is the background                 image that should be displayed behind the other 3 images it is 1523x993 and i don't 
know how to make it stretch to be 3 time the size of the of the window -->
<div id="dvScreen1"><img src="2(1).png"/></div><!--These is one of the 3 photos that will be displayed above the background image, 
I want to make it centered in the window and responsive so if the window height changes than also its wide should change and the position 
should remain centered so that it won't display the next photo if the user makes the height of the window very small and the wide very large  -->
<div id="dvScreen2"><img src="l1.png"/></div><!-- these will be the second photo and should have the same properties as the first and should come to the right of the firs, between the first and the second -->
<div id="dvScreen3"><img src="l1.png"/></div> <!-- these photo will be the last so it will be floated left and will have the same responsive properties as the both will remain
centered and resize automatically on the x and y axes if the user resizes the window on y axes or the x axes--!>
    </body>

    </html>

我的 CSS 代码：

     body{
 height: 100%;
     overflow-x:vizible;
     width:300%;
     margin:0%;
     padding:0%;
 overflow-y:hidden;
 position;fixed;
     }
    #dvScreen1, #dvScreen2,#divScreen3{
    width:33.3333%;
    height:100%;
    clear:none;
    }
    #dvScreen1 {
    margin-left:0%;
    border:solid red 1px;
    margin-top:-100%;   
   }
#dvScreen2 {
    margin-left:33.33333%;
    border:solid black 1px;
    text-align:center;
    margin-top:0%;
    }
    #dvScreen3{
    margin-left:66.66666%;
    border:solid blue 1px;
    text-align:center;
    margin-top:0%;
    }
    #background{
    min-width:100%;
    margin:0%;
    padding:0%;
 }

感谢您对代码的任何帮助

4

1 回答 1

0

除非有特定原因将背景图像的大小设置为 300%，否则最好在 CSS 的正文部分中使用 background-image 属性并使用 no-repeat 作为值之一。当您的浏览器呈现 HTML 文档时，第一个视觉对象是正文，因此将伸展整个屏幕。然而，有时图像可能不会覆盖整个屏幕，然后我可以使用背景设置为 300% 的 img 标签看到。如果您还没有，请先尝试其他方法。至于其他三个图像，将它们包含在另一个 div 中以获得最佳结果。因此，不要只有 3 张辅助图片，而是执行以下操作：

<div id="pictures">

    <img src="2(1).png">

    <img src="l1.png">

    <img src="l1.png">

</div>

您必须在容器上设置特定的宽度，但这可以让您更干净地编写 css 代码，如下所示：

#pictures{
    width:50%;
    margin: 0 25%; 
    /* This is an example size I came up with in my head */
}

#pictures img{
    /* This is to follow the basic format of the images */
    width:33.3333%;
    float:left;
    }

当然，如果每个边框都需要不同的颜色，那么只需将 id 放在每个 img 标签内，然后只更改边框属性。为了保持外观，请尝试制作三个与用户设备相对应的不同 css 文件：移动设备、平板电脑和个人电脑，并相应地调整值。

于 2015-01-10T03:55:28.240 回答