如何同时固定位置和固定背景? [英] How to have both position fixed and background-attachment fixed?

问题描述

我有一个父div，其中包含名为.linkHolder的链接.父div的位置已固定，可在滚动时将其固定在适当的位置.每个链接都有背景，这些背景具有背景附件:已固定，它们称为#homeLink，#aboutLink和#servicesLink.这两件事似乎相互抵消了.我希望能够在.linkHolder保持原位并且背景保持其良好背景图像影响的情况下进行滚动.这是html和CSS.谢谢.

I have a parent div which contains links called .linkHolder. The parent div has a position fixed to keep it in place as one scrolls. There are backgrounds to each link and these backgrounds have a background-attachment: fixed which are called #homeLink, #aboutLink, and #servicesLink. These two things seem to cancel each other out. I want to able to scroll while the .linkHolder stays in place and the background keeps its nice background image affect. Here is the html and css. Thank you.

<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;
}

推荐答案

您使用过.代替 #.这应该起作用.

You used . instead of #. This should work.

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

这篇关于如何同时固定位置和固定背景?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！