background-image

问题 Suppose I want to render an arrow in CSS, which should have a head, a tail and flexible width so it can contain text. I can of course create multiple divs to get what I want, but how can this be done in CSS3? I can use multiple background images: div.arrow{ background: url('arrowtail.png') left no-repeat, url('arrowhead.png') right no-repeat; } The html: <div class="arrow">This text is on a transparent background</div> This gives me an div with an arrow-head and tail, and a transparent middle

问题 Is it possible to change the background color on button click; of the entire document , using only CSS and HTML5? (e.g.: it's trivial in JavaScript) 回答1: Based on the fiddle I posted in the comments I've modified it very slightly to use the Bootstrap button CSS. Just include Bootstrap's CSS file then use the code below. HTML <label for="check" class="btn btn-default">Toggle background colour</label> <input type="checkbox" id="check" /> <div></div> CSS div { width: 100%; height: 100%;

问题 This is my code: background-color:#fff; background-attachment:fixed; background-repeat:no-repeat; background-size:cover; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center center; It's working on desktop, iPad and Android mobile: On Chrome and Safari on iPhone, the background is too big: 回答1: This happens when you have background-attachment:fixed . On mobile, I usually put background-attachment:scroll inside of a @media query.

问题 I have an image called myImage.jpg. This is my CSS: body { background-image:url("../images/myImage.jpg"); background-repeat: no-repeat; background-size: 100% 100%; } For some reason, when I do this, the width of myImage stretches across the entire screen but the height only stretches until the height of everything else on the page. So if I put a bunch of <br> in my html page, then the height will increase. If my HTML page consists only of a <div id='header'> <br> </div> then the height of the

问题 I recently figured out how easy it was to use a background image and map data on top of it using Tableau Public. Here is the process from their website. As you can see, it is fairly straightforward, and you simply tell the software what image you want to use and how to define the coordinates. Is the process as straightforward in R? What would be the best approach? 回答1: JPEG For jpeg images, you can use read.jpeg() from the rimage package. eg : anImage <- read.jpeg("anImage.jpeg") plot(anImage

问题 I'm trying to make a UIView image for my background in swift using pattern image. The code I have works well except for the fact that I want the image to take the whole screen. My code looks like this: self.view.backgroundColor = UIColor(patternImage: UIImage(named: "backgroundImage")!) Does anyone know how to make the background an image that will take up the whole screen, and would scale when appearing on different iPhone screen sizes? 回答1: Note That: I posted this answer from my old

问题 This question was asked before but the solution is not applicable in my case. I want to make sure certain background images are printed because they are integral to the page. (They are not images directly in the page because there are several of them being used as CSS sprites.) Another solution on that same question suggests using list-style-image , which only works if you have a different image for every icon, no CSS sprites possible. Aside from creating a separate page with the icons inline

问题 I was looking at the source of a greasemonkey userscript and noticed the following in their css: .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom} I can appreciate that a greasemonkey script would want to bundle anything it can within the source as opposed to host it on a server, that's obvious enough. But since

问题 I want to show an image from an URL with a certain width and height even if it has a different size ratio. So I want to resize (maintaining the ratio) and then cut the image to the size I want. I can resize with html img property and I can cut with background-image . How can I do both? Example: This image: Has the size 800x600 pixels and I want to show like an image of 200x100 pixels With img I can resize the image 200x150px : <img style="width: 200px; height: 150px;" src="http://i.stack

问题 I'm trying to make a "fade-in fade-out" effect using the CSS transition. But I can't get this to work with the background image... The CSS: .title a { display: block; width: 340px; height: 338px; color: black; background: transparent; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; } .title a:hover { background: transparent; background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I