0

我想知道当浏览器未最大化时如何使用 CSS 来限制页面的可滚动宽度。可以在http://www.lynda.com/的登录页面上找到一个典型示例

当浏览器最大化时，沙发上的女士的图片在左右两侧有一些空间，但是当浏览器区域缩小时，您会意识到您无法滚动到最左边和最右边。

我正在尝试使用下面的代码在http://www.lynda.com/上实现类似的布局，但是当我缩小浏览器窗口并向右滚动时，我的图像在右侧被剪掉了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; 

charset=utf-8" />
<title>Untitled Document</title>
<link href="ave.css" rel="stylesheet" type="text/css" />

<link href="gh.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="#EEEEEE">
<div id="bigpicturecontainer"></div><!--image size is 1600px x 

400px and can be downloaded here 

http://www.ghanabuildingplans.com/trial.png
-->

<div id="bigmessage">Content for  id &quot;bigmessage&quot; 

Goes Here</div>
</body>
</html>

我的CSS代码是：

#bigpicturecontainer {
background-color: #000;
background-image: url(images/trial.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
height: 400px;
width: 100%;
}
#bigmessage {
height: 45px;
width: 900px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
margin-top: 50px;
font-size: 36px;
text-align: center;
margin-left: auto;
margin-right: auto;
}

我找到了解决方案！我需要做的就是设置最小宽度。

4

2 回答 2

1

它是背景前的背景图像。你看到的女人，是这张照片： http ://cdn.lynda.com/assets/197-r20131102/Website/ui/images/LayoutNMHP/hero-image-tablet-couch.jpg 你看到过渡到黑色边。比这后面background-image有一个background只是黑色的。

background-image: url(../../images/LayoutNMHP/hero-image-tablet-couch.jpg);
background: #000

http://www.w3schools.com/css/css_background.asp

于 2013-11-04T18:55:10.520 回答
0

您正在谈论的这张图片作为 CSS 属性嵌入到网站中background-image。它的可见性取决于它嵌入的元素。在这种情况下，在.herodiv 中。这个 div 有固定的高度。默认情况下，宽度为 100%。图像位于该 div 的中心。无论窗口视口是什么，图像都将始终适合.herodiv。它不会影响该 div，因此无法强制网站溢出窗口。
此类图片的快捷 CSS 可能如下所示：

.hero {
    background-color: #000;
    background-image: url(http://cdn.lynda.com/assets/197-r20131102/Website/ui/images/LayoutNMHP/hero-image-tablet-couch.jpg);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
}
于 2013-11-04T18:55:18.110 回答