如何固定位置和固定背景附件？答案

【问题标题】：How to have both position fixed and background-attachment fixed?如何固定位置和固定背景附件？
【发布时间】：2020-11-17 06:56:09
【问题描述】：

我有一个父 div，其中包含名为 .linkHolder 的链接。父 div 有一个固定位置，以便在滚动时将其保持在原位。每个链接都有背景，这些背景有一个背景附件：固定，称为#homeLink、#aboutLink 和#servicesLink。这两件事似乎相互抵消了。我希望能够在 .linkHolder 保持原位并且背景保持其良好的背景图像效果时滚动。这是html和css。谢谢。

<div id = "linkHolder">
   <ul>
      <li><a id = "homeLink" href="/">Home</a></li>
      <li><a id = "aboutLink" href="/about">About</a></li>
      <li><a id = "serviceLink" href="/service">Services</a></li>
   </ul>
 </div>

CSS

.linkHolder {
   position: fixed;
   top: 0;
   width: 100%;
 }
ul {
   list-style-type: none;
   overflow: hidden;
   background-color: #1b242f;
   text-align: right;
   font-size: 22px;
   width: 100%;
   font-family: "Sansita Swashed";
}
li {
   display: inline-block;
   padding-right: 6%;
}
#homeLink{
   background-image: url("/static/portfolioBackground/linkBackA.png");
   background-repeat:no-repeat;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
}

【问题讨论】：

标签： html css

【解决方案1】：

你用过。代替＃。这应该可以。

#linkHolder {
   position: fixed;
   top: 0;
   width: 100%;
}

【讨论】：