图像周围的白色边框

loomanleet

目前我在一个网站上工作,并且一直以来我一直在努力处理背景图片。我认为这可能是由侧边栏引起的(我创建的第一个网站具有侧边栏)。现在,由于某种奇怪的原因,它周围有一个白色边框。

这是一张图片https://gyazo.com/d81f071f3e0d5b18020485565271557b

@font-face {
  font-family: 'source_sans_prolight';
  src: url(font1/sourcesanspro-light-webfont.woff2) format("woff2"), url(font1/sourcesanspro-light-webfont.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'open_sansregular';
  src: url(font2/opensans-regular-webfont.woff2) format("woff2"), url(font2/opensans-regular-webfont.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'edoregular';
  src: url(font3/edo-webfont.woff2) format("woff2"), url(font3/edo-webfont.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}
.sidebar {
  width: 200px;
  height: 100%;
  background-color: #212121;
  top: 0;
  left: 0;
  position: fixed;
  -webkit-box-shadow: 4px 0px 35px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 4px 0px 35px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 4px 0px 35px 2px rgba(0, 0, 0, 0.75);
}
.logo {
  width: 180px;
  padding: 30px 10px 50px;
  border-bottom: 1px solid #2A2A2A;
}
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid #2A2A2A;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-family: source_sans_prolight;
  font-size: 17px;
  transition: opacity .15s ease-in-out;
  -moz-transition: background-color .15s ease-in-out;
  -webkit-transition: background-color .15s ease-in-out;
}
.menu li a:hover {
  background-color: #fff;
  color: #000;
}
.midheader {
  margin: 0 auto;
  width: 180px;
  height: 25px;
  padding-top: 30px;
}
.midheader h1 {
  font-family: edoregular;
}
.midheader p {
  font-family: open_sansregular;
  font-size: 13px;
  text-align: justify;
  color: #fff;
}
.button1 {
  background-color: #3AC6F4;
  border: none;
  color: #fff;
  width: 180px;
  height: 50px;
  font-family: edoregular;
  font-size: 20px;
  -webkit-box-shadow: 0 3px 5px -2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0 3px 5px -2px rgba(0, 0, 0, 0.75);
  box-shadow: 0 3px 5px -2px rgba(0, 0, 0, 0.75);
  -moz-transition: background-color .15s ease-in-out;
  -webkit-transition: background-color .15s ease-in-out;
}
.button1:hover {
  background-color: #fff;
  color: #000;
}
.content1 {
  background-image: url(images/firstimgbk.svg);
  height: 1080px;
  outline: none;
}
.title {
  margin: 0 auto;
  width: 850px;
  padding-left: 200px;
  font-family: edoregular;
  font-size: 100px;
  padding-top: 180px;
  text-align: center;
  color: white;
  text-shadow: 2px 5px #292929;
}
.title p {
  font-size: 40px;
  text-shadow: 5px 2px #292929;
}
.arrow {
  left: 50%;
  bottom: 10px;
  position: absolute;
  width: 100px;
  padding-left: 50px;
  -moz-transition: -webkit-filter .15s ease-in-out;
  -webkit-transition: -webkit-filter .15s ease-in-out;
}
.arrow:hover {
  -webkit-filter: drop-shadow(0px 2px 2px black);
}
.content2 {
  height: 1080px;
  background-color: white;
}
.footer {
  margin: 0 auto;
  position: fixed;
  bottom: 20px;
  padding: 20px;
  height: 20px;
  font-family: open_sansregular;
  font-size: 13px;
  color: #fff;
  border-top: 1px solid #2A2A2A:
}
<!DOCTYPE html>
<html>

<head>
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <link href="css/style.css" rel="stylesheet">
  <link href="css/images/favicon.ico" rel="shortcut icon">
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Loom | Home</title>
</head>

<body>
  <a id="home" name="home"></a>
  <div class="sidebar">
    <div class="logo">
      <a href="index.html">
        <img alt="Logo" src="css/images/exloomd&c.svg">
      </a>
    </div>
    <div class="menu">
      <ul>
        <li>
          <a href="#home">Home</a>
        </li>
        <li>
          <a href="index.html">About</a>
        </li>
        <li>
          <a href="index.html">Portfolio</a>
        </li>
        <li>
          <a href="index.html">Contact</a>
        </li>
      </ul>
    </div>
    <div class="midheader">
      <p>Check out my new website where our goal is to provide the cheapest most requested products!</p>
      <button class="button1">ExLoom Market
      </button>
    </div>
    <div class="footer">
      <div class="footer">
        ©2016 ExLoom.
        <br>All Rights Reserved.
      </div>
    </div>
  </div>
  <div class="content1">
    <div class="title">
      hello
      <p>hello</p>
    </div>
    <div class="arrow">
      <img src="css/images/arrowdown.svg">
    </div>
  </div>
  <div class="content2">
    hej
  </div>
</body>

</html>

j08691

默认情况下,大多数浏览器为该<body>元素留有空白。使用以下方法将其删除:

body {
    margin: 0;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

图像上的链接显示Internet Explorer中图像周围的边框

来自分类Dev

如何删除图像周围的边框?

来自分类Dev

libGDX-在图像周围做边框

来自分类Dev

Cardview-卡周围的白色边框

来自分类Dev

gnuplot:绘制没有白色边框的图像

来自分类Dev

标签周围有图像的白色边框?

来自分类Dev

消除图像文字周围的白色轮廓

来自分类Dev

深色主题CardViews周围的白色边框

来自分类Dev

如何使用python删除图像中人物周围的白色边框/边缘?

来自分类Dev

如何不只旋转图像周围的边框?

来自分类Dev

摆脱选项菜单周围的白色边框

来自分类Dev

如何在移动视图中删除图像周围的白色边框?

来自分类Dev

图像周围带有边框的多个边框

来自分类Dev

在Pygame中删除图像周围的边框

来自分类Dev

libGDX-在图像周围做边框

来自分类Dev

Android圆形图像周围的圆形边框

来自分类Dev

如何删除边框周围的图像

来自分类Dev

在填充页面的图像周围创建边框

来自分类Dev

删除表面视图周围的白色边框

来自分类Dev

html文档中单个图像周围的白色边框

来自分类Dev

删除div周围的白色边框

来自分类Dev

标签周围有图像的白色边框?

来自分类Dev

所选画廊图像周围的边框

来自分类Dev

在图像引导程序周围设置边框

来自分类Dev

在MATLAB中在图像周围绘制彩色边框?

来自分类Dev

使用CIFilter的iOS图像周围的白色像素

来自分类Dev

谷歌在白色背景中的红色图像周围镀铬绿色轮廓

来自分类Dev

(CSS) 菜单周围奇怪的白色边框不是边框

来自分类Dev

JSFiddle CSS 问题?图像周围的链接边框