background-image

问题 I have a group of images which each have their own links. I want the images to be in a list ( <ul><li> .. etc) and have each item have a different background-image . Would I run into any issues with something like this? <ul> <a href="#"><li class="1"></li></a> <a href="#"><li class="2"></li></a> <a href="#"><li class="3"></li></a> <a href="#"><li class="4"></li></a> <a href="#"><li class="5"></li></a> <a href="#"><li class="6"></li></a> </ul> 回答1: You would do better to write it like this <ul

问题 I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large background images, the whole thing becomes visible. My current screen resolution is 1280 x 1024. If I do the following: Specify a background image that is 1400px wide Specify "position" as "center center" (horiz. / vert.) Specify "stretch page width to background image width" then in FF, the

问题 It's often stated that when tiling the background of a web page with background-image, that performance is better with an image of larger dimensions due to it needing to be tiled less frequently. For a while I've been making them 8x8 px, or multiples of 8. But does anyone have links to data that prove this is the case across a range of browsers, taking in rendering times, or CPU load at various points of page rendering? 回答1: I'd imagine it matters very little in these modern browsers you

问题 Supposing that I have a polygon image PNG file like this (No border, the shape is filled with one color, no gradient, and background of the image is transparent) http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF I'm thinking of using that polygon image as a background image and it will be changed (to another image with different color) when the user hovers on it. But I also want the color of the background image to be customizable. So, I'm thinking if there is any possibility to

问题 I am facing a strange problem while using fragments and just cant figure it out. When I am replacing fragments inside my MainActivity container, some will keep the desired transparent background, and some will show a default-like white one. I actually want all my fragments to be transparent and 'use' the background assigned to the MainActivity. For example: Fragment A: white background <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"

问题 I'm trying to get background Images to fadeIn / fadeOut when the user scrolls down the page. In the long run I'm shooting for a time lapse effect using several background images. I've got the background images changing on scroll, but I can't seem to get them to fade from one to the next. Here is what I've got so far - jsFiddle $(document).scroll(function () { if ($(this).scrollTop() > 1) { $('body').css({ backgroundImage: 'url("http://s3.amazonaws.com/dfc_attachments/images/3237846/sun1_web

问题 I want to give my css-enlarged icon sprite a little white space followed by a 1px thin outline, like so: Now I have tried these demos, with same elegant html and only varying CSS (with some help from standing on the shoulders of other talented giants in the community here): JS Fiddle Demo1 JS FIddle Demo2 { border: 1px solid white; outline: 1px solid red; } However, in both approaches, as you can see, both border (which acts as a spacer here) and outline are much fatter than the 1px that I

问题 I'm trying to pull together some kind of code that will randomize the background image on my blogger blog. My programming skills are scant, but I'm willing to try suggestions out. I remember achieving s/th similar in Wordpress, by having a file of php-code stored inside a folder of images and then calling that php file - as if it was an image - from within CSS. But from what I read, blogger doesn't recognize php, so I guess I'll have to try out some javascript (?) <script type="text

问题 If I do that: .floatingBox div div { text-align: center; position: relative; background-image: url('../images/car.png'); background-repeat: no-repeat; background-position: center; } <div class='floatingBox'> <div class='effect2'> <a href=/Devis/moto><div class='motorbike'></div></a> </div> </div> then the background image shows up fine. However if I do: .floatingBox div div { text-align: center; position: relative; background-repeat: no-repeat; background-position: center; } .motorbike {

问题 I would like to place div's (input form) on a responsive background. I'm using Bootstrap 3 for the page template. But if I resize the window or use another screen size the elements are on another place. How could I fix this common issue? Example: http://goo.gl/D7TwIP Thanks! 回答1: Instead of using margin-top and margin-left use top and left properties on a positioned absolute element. top: 540px; left: 117px; position: absolute; Also make sure the parent element is set to position relative.