Question

我收到了一些关于过去任务的反馈，警告我我的图像模糊不清。但我无法弄清楚如何解决它。作业给出了非常明确的描述，但我做了所要求的一切。

我必须为图像执行以下操作：

添加名为yurthero的新选择器ID。在CSS代码声明中配置300px高度并显示coast.jpg背景图像以填充空间（使用background-size：100％100％;）而不重复。

如何阻止图像模糊？在我看来，拉伸迫使它模糊。

下面是html5，css3和我正在使用的图片。

＆＃13;

/* pacific.css for assignment #3 by Caleb Latimer */
body{
      background-color: #FFFFFF;
      color : #666666;
      font-family: Verdana;
      background-image: url(background.jpg);
}
h1{
      background-color: #000033;
      color : #FFFFFF;
      font-family: Georgia;
      line-height: 200%;
      background-image: url(sunset.jpg);
      background-repeat: no-repeat;
      padding-left: 20px;
      height: 72px;
      margin-bottom: 0;
      background-position: right;
}
nav{
      font-weight: bold;
      background-color: #90C7E3;
      padding: 5px 5px 5px 5px;
}
h2{
      color: #3399CC;
      font-family: Georgia;
}
dt{
      color: #000033;
      font-weight: bold;
}
.resort{
      color: #000033;
      font-size: 1.2em;
}
footer{
      font-size: .70em;
      font-style: italic;
      text-align: center;
      padding: 10px 10px 10px 10px;
}
#wrapper{
      width: 80%;
      margin-right: auto;
      margin-left: auto;
      background-color: #ffffff;
      min-width: 700px;
      max-width: 1024px;
      box-shadow: 5px 5px 5px #828282;
}
h3{
      color: #000033;
}
main{
      padding-left: 20px;
      padding-right: 20px;
      display:block;
}
#homehero{
      background-size: 100% 100%;
      height: 300px;
      background-image: url(coast.jpg);
      background-repeat: no-repeat;
}
#yurthero{
      height: 300px;
      background-image: url(yurt.jpg);
      background-size: 100% 100%;
      background-repeat: no-repeat;
}
#trailhero{
      height: 300px;
      background-image: url(trail.jpg);
      background-size: 100% 100%;
      background-repeat: no-repeat;
}
nav a{
      text-decoration: none;
}

＆＃13;

<!-- Chapter 4 Homework by Caleb Latimer -->
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Pacific Trails Resort</title>
    <link rel="stylesheet" href="pacific.css" /> <!-- Uses the pacific.css stylesheet inside of folder -->
  </head>
  <body>
        <div id="wrapper">
             <header>
                     <h1>Pacific Trails Resort</h1>
             </header>

          <nav>
            <a href="index.html">Home</a>
            &nbsp;
            <a href="yurts.html">Yurts</a>
            &nbsp;
            <a href="activities.html">Activities</a> 
            &nbsp;
            <a href="reservations.html">Reservations</a> <!-- Doesn't lead anywhere no requirements given -->
          </nav>

          <div id ="homehero"></div>
          <main>
            <h2>Enjoy Nature in Luxury</h2>

            <p>
              <span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.
            </p>

            <ul>
              <li>Private yurts with decks overlooking the ocean</li>
              <li>Activities lodge with fireplace and gift shop</li>
              <li>Nightly fine dining at the Overlook Cafe</li>
              <li>Heated outdoor pool and whirlpool</li>
              <li>Guided hiking tours of the redwoods</li>
            </ul>

            <div>
              <span class="resort">Pacific Trails Resort</span> <br />
              12010 Pacific Trails Road <br />
              Zephyr, CA 95555<br /><br />
              888-555-5555<br />
            </div>

          </main>

          <footer>
            Copyright &copy; 2016 Pacific Trails Resort <br />
            <a href = "mailto:Caleb@Latimer.com">Caleb@Latimer.com</a>
          </footer>
        </div>
  </body>
</html>

＆＃13;

Answer 1

事实证明，我被赋予错误的作业照片。使用正确的图片，他们会按预期结果。始终检查图像的尺寸，高度和宽度尺寸。

如何使用CSS渲染时修复图像模糊？

1 个答案: