background-image

问题 use an icon (.png transparent background) for my menu. There isn't any problem for IE9, Chrome,Firefox,safari,opera.But if I open page with IE7 or IE8 there is a broken black border around image. CSS codes; .menu-item1{ background:url(img/spriteimage.png) no-repeat 0 0; height:20px; width:20px; opacity:0.5; } How can I fix this? 回答1: IE7 and IE8 have native PNG support for alpha-transparencies, but it falls to pieces as soon as opacity comes into the picture Try faking a background image or

问题 We're using SVGs for the first time for our mobile HTML5 based app sprites file (they make dealing with retina an other screen size differences easy). I know generated SVGs can be manipulated directly (as they are text files) but can one modify an SVG asset (in this case, a background image loaded via the CSS) via CSS or scripting? For instance, can we load an all-black SVG object, and then change it to white? 回答1: You can't access the DOM of the SVG file if it's loaded as an image (either

问题 I am trying to load a image: background: transparent url("../img/select-icon.png") no-repeat center right 8px; At my style.scss and it is not working Here is my webpack.config: function _path(p) { return path.join(__dirname, p); } module.exports = { context: __dirname, entry: [ './assets/js/index' ], output: { path: path.resolve('./assets/bundles/'), filename: '[name].js' }, devtool: 'inline-eval-cheap-source-map', plugins: [ new BundleTracker({filename: './webpack-stats.json'}), new webpack

问题 I have a website with an ad on every page. I'd like to display a message saying, "Please consider disabling your adblock, it helps us out tremendously." if the user has AdBlock enabled. Here's my attempt: <div id="ad-wrapper"> <!-- Ad script here. It works fine. --> </div> And my CSS: #ad-wrapper { background-color: #1D1D1D; border: 1px solid #232323; float: right; height: 90px; margin-right: 4px; width: 728px; overflow:hidden; background-image: url('/Public/images/disabled-ad.jpg'); } When I

问题 I'm building a website that has a full width background image in the header that resizes with the page. There is an unusual flickering horizontal line that appears under the image when it is resized in Firefox. The line does not appear at full with, but blinks on and off when the size is changed. The line appears at the bottom of the background image, not the bottom of the header element. It appears in the MacOS build of Firefox only when I tested it in OSX 10.8.4, Firefox 23.0. The problem

问题 I'm building a website that has a full width background image in the header that resizes with the page. There is an unusual flickering horizontal line that appears under the image when it is resized in Firefox. The line does not appear at full with, but blinks on and off when the size is changed. The line appears at the bottom of the background image, not the bottom of the header element. It appears in the MacOS build of Firefox only when I tested it in OSX 10.8.4, Firefox 23.0. The problem

问题 I'm creating a special UI control using HTML/CSS to mimic the Windows 7 Control Panel buttons. So far, I've got the layout right and now I'd like to add some cosmetics to it. As seen here, there is a gradient that appears when you hover over the button with your mouse. http://m.cncfps.com/zack/files/this-control.png Now, you can see here that I've got the layout done. I'd like to add a :hover effect to the whole div item with a background image. Currently, here is what I have for the CSS- yet

问题 I'm creating a special UI control using HTML/CSS to mimic the Windows 7 Control Panel buttons. So far, I've got the layout right and now I'd like to add some cosmetics to it. As seen here, there is a gradient that appears when you hover over the button with your mouse. http://m.cncfps.com/zack/files/this-control.png Now, you can see here that I've got the layout done. I'd like to add a :hover effect to the whole div item with a background image. Currently, here is what I have for the CSS- yet

问题 This question already has answers here : Best way to center a <div> on a page vertically and horizontally? [duplicate] (30 answers) How do I vertically center text with CSS? [duplicate] (38 answers) Closed 4 years ago . I want to create image box(with image). It's ugly when text is in the top of box. How can I align text to middle? I tried to use vertical-align , but it seems, that it don't works Demo of my code EDIT: Your solution works fine with short messages. But if they will be multi

问题 I have a play button which I want to change the background image so it looks like a pause button when clicked, I have already seen many guides on how to do this however my Ellipse template seems to make my code much different from anything I have researched. Here is my Code: <Button HorizontalAlignment="Left" Width="40" Height="40" Click="Button_Click_2"> <Button.Template> <ControlTemplate TargetType="{x:Type Button}"> <Grid> <Ellipse Stroke="Black"> <Ellipse.Fill> <ImageBrush ImageSource=