background-attachment

问题 I'm trying to set a background image for an spn web app and I need the background to be fixed (that it won't be scrolled with the rest of the page). this is the body css: body { background-color: rgb(51, 102, 102); background-image: url('../images/background.png'); background-attachment: fixed; background-position: center; color: #eee; } Safari in IOS and Chrome on Android repeat the background instead of fixing it at one point. I've seen on the internet it's been disabled on mobile but is

问题 I'm trying to find a solution to the problem I'm having with fixed backgrounds on iOS devices. I would rather not have to redesign everything for this website, and I'm hoping that some CSS changes can fix it. This is what the site looks like on iPhones, and this is what it should look like. The CSS code I'm using is as follows: .container { min-width: 320px; max-width: 480px; margin: 0 auto; } .fixed-background { height: 800px; -webkit-backgound-size: cover; -o-backgound-size: cover; -moz

问题 My question is how to fix rendering issues in Safari 14 related to a combination of multiple background gradients ( linear and radial ), background-attachment ( local and scroll ) and ``mix-blend-mode`. Please see example: https://codepen.io/astro87/pen/LYRQNbd?editors=1100 Correct rendering in Google Chrome Background gradient visible on the right edge: Scroll a bit to the right and see background gradient is visible on the left and right edge: Scroll completely to the right edge and see

问题 My question is how to fix rendering issues in Safari 14 related to a combination of multiple background gradients ( linear and radial ), background-attachment ( local and scroll ) and ``mix-blend-mode`. Please see example: https://codepen.io/astro87/pen/LYRQNbd?editors=1100 Correct rendering in Google Chrome Background gradient visible on the right edge: Scroll a bit to the right and see background gradient is visible on the left and right edge: Scroll completely to the right edge and see

问题 I have 4 divs stacked each with an img background covering the viewport, and I have a parallax effect (with GSAP) that moves the images at a different speed than the scrolling as I scroll down. This works fine on all devices except iOS : after deployment, while it still works perfectly on desktop and Android, the images don't scale down on iPhone so I see a clipped portion of my images, zoomed in. I'm aware there's an issue with background-size:cover and background-attachment:fixed on iOS,

问题 THE ANSWER: background-attachment ----- JSBin Example ---- The answer is to use background-attachment ORIGINAL QUESTION I'm working on a project where we want to display a modal that "sees through" to the backdrop, but everywhere outside of the modal panel is slightly masked. I have successfully used border: 10000px rgba(0,0,0,0.3) with border-radius: 10010px but this is a hack, and I can't outline the modal with a box-shadow Is there any standard way for doing this? Bonus points if you can

问题 I'm developing a cordova app and I'm trying to get a fixed background. Unfortunately, it doesn't seem to be working, and anytime I scroll down the background simply goes off the top of the page. Here's the CSS I'm using to do this (and I've tried it several other ways): html { width:100%; height: 100%; background-color:#000000; background-image:url('../img/bg_reader.jpg'); /*background-repeat:no-repeat; background-attachment: fixed; background-position: center;*/ background-size: 100% 100%; }

问题 I've got the following code running on an element that spans 100% of the browser: #section_white { background-attachment:fixed; background-image:url(image_url_here.jpg); background-position:100% 100%; background-repeat:no-repeat no-repeat; background-size:cover; } What I need to do is to have the image span the entire width of the browser, while remaining fixed (thereby allowing the content to scroll on top of it). It seems to work on all the browsers except Safari - any ideas what I'm

问题 I've got a background image scaled to fit inside its container, and I have appropriate fallbacks (not shown) for when Modernizr detects that the browser does not support background-size. .wrap { width: 200px; height: 116px; position: absolute; background-image: url(image.jpg); background-attachment: fixed; background-position: 0 0; background-size: 200px 116px; background-repeat: no-repeat; } Here's an example: http://jsfiddle.net/crowjonah/6xYNm/ It looks beautiful in Chrome, Firefox, Safari

问题 I've had this issue for a while and it seems to be a Chrome redraw bug that hasn't been fixed. So I'm looking for any stop-gap fixes. The main issue is that when an element on the page has a background image that uses: background-attachment: fixed; If another element is fixed and has a child video element it causes the element with the background image to disappear. Now it works fine in Safari (and Firefox and IE) so it's not exactly a webkit issue. I've applied several properties that have