I'm trying to create an arrow button like the upvote here in stackoverflow (http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5).
The only difference is when I hover the mouse over the arrow, it will change the background image.
I need something like this http://css-tricks.com/snippets/css/css-triangle/, but with background image, instead of RGB color.
What is the best way?
If you know your background color, you can get sneaky. For example, if the background of the page is white...
HTML
<div id="arrow">
CSS
#arrow {
width: 0;
border: 40px solid white;
border-bottom-color: transparent;
background-image: url('...');
background-position: -40px 0;
background-repeat: no-repeat;
background-size: 80px;
}
You'll have to munge with the background position and size properties to get exactly the effect you want.
Related
I have a picture of a chess piece. I want to put this picture on some background representing chessboard. Now when I put this picture I have this white background. Is there any way (using HTML, CSS or JavaScript) to remove white background from the picture and leave only the piece? Now it looks like that: picture.
CSS file:
.dark-spot{
background-color: rgb(209, 139, 71);
}
.spot{
height: 110px;
width: 110px;
}
HTML file:
<div class="spot dark-spot">
<img class="img-fluid" src="images/pieces/black-rook-square.jpg">
</div>
Apparently you are using JPG images. JPG images will contain color everywhere, i.e. every pixel in it will contain a certain color. To make it fit with the background, you'd have to edit the JPG and convert all white pixels to your background color.
But since you have two background colors, you need to convert all white pixels to be transparent instead of white. This isn't possible with the JPG image type, you'll need to convert these images to either PNG or GIF and then "erase" the white pixels, making them transparent that way. The result will be that your background image color (the chessboard) will be displayed ("come through") at the transparent positions.
You can kind-of do this using CSS mix-blend-mode: multiply. This will "remove" any white color (making it transparent) and will also affect any bright pixels which also with the same transparency, so the closer the pixel color is to white, the more transparent it will be.
body{
height: 100vh;
background: linear-gradient(salmon, lightgreen) no-repeat;
}
.piece{
background: url(https://www.baytree-interiors.co.uk/_uploads/img/products/giant/aged-stone-outdoor-queen-chess-piece-ornament_19661.jpg) 0 0 / 100% 100% no-repeat;
height: 200px;
width: 180px;
}
input:checked ~ .piece{
mix-blend-mode: multiply;
}
<input type='checkbox' id='remove-bg'>
<label for='remove-bg'>Remove chess piece white background</label>
<div class='piece'></div>
I suggest you to get board pieces images which are in APNG format, which already allows an alpha channel. I guess you can find plenty such APNG chess pieces files online.
According to this answer it's possible if the background is white.
Here is a sample code:
.dark-spot{
background-color: rgb(209, 139, 71);
}
.spot{
height: 110px;
width: 110px;
}
.spot-image {
height: 110px;
width: 110px;
mix-blend-mode: multiply;
}
<div class="spot dark-spot">
<img class="img-fluid spot-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAe1BMVEX///8AAAD8/PwFBQX5+fnLy8u+vr4ICAiqqqq6urrk5OTf39+QkJBqamrS0tL19fU2NjaYmJgmJiZiYmKlpaVZWVmKiopAQEDs7OxGRkbY2Nizs7MrKyuBgYHExMSfn58bGxsTExN5eXlQUFAoKChxcXFcXFx8fHwZGRkM760UAAAEoElEQVR4nO3aa2OaOhjA8VxQrFrRWi/V1tr2uLPv/wmXC2ASkO3FCt32/704beMDJw9JHghOCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPyBlFL1f/9S6jAeFeIvzvD4LI2XYuh+fBIlXmRpLFQWfaTM6B4n42nYrlQ6ncMW83N2Go/2IpwRWabqyM9JottrmV8u5UREPVBq4kZXPlbt8Y8otvw5WrojnsZBkMmruHt8PR6GWQbTagRzbVMMFRsptZamfVRHT+bb1SI+w+Lu7jQrfx9XZ5Pra4ASK9/2EJ+/J2ubQe1Yz65MFQ9184dvURf/53JkZp7ws27/IetxVqI+QptjfIk2h23q5m3b+H+uvQwyNL/N6pmoPuwAlvauZeNbzHyeC3+DEfuH8kD5bppO17Npuapi3u0RZdi09xTH4RCa/j/XHViZP+vPprZlIvPcZahzMxi+98/V8Vqe7JrW11NJN3WV/V/ouvGx9wy3MvFe1sZD2Hh23VoG10K+mrjsWodNy0WIeXSqnZvG2Vty+l7zU+I+zdBUFXuXEJtqaln3NngaBJnRWJigUXjgf6KqKFXOE3uqOOtL7xm+J/lpeXYlYxQsQinvbPAhmNBmti5N1C489GzncXQqWbiFHpr3nuE4ysTZ2iv/Ebbk7pa9SOJW8SK2s3SUhJixv48W+vW+0x8p0wzlIc3G1/hZEqazXVSHJ/FEdhaz8Aqa3/p+qlFh+asthbhEDb7EJ/PN3PHi8T+46xV7SmIuAzzfZ+e0V1q+7KM/N2XoMo2MPNiuPzWvV2TR1ZXPcmxkmMtlWEjrtfOSRkbcHXLeGeKfjfqmzHWP5fZZNBiKpyo0rSMxd38/dY/haZgMpy3FJlQNoVLnZuH1TPO6ba1GMbl9VB0iQ3tP7sqw7pa7ed/I0A6PC9u1fl5ehcVQGXaXELOPqDIsbl+KZblFvL0QtfyW7LB7NPO7w9ZuRcVhG1WgMKwqkuljQWg/QGqeMvX0Rob+Lle7uczu63M930xw1X9mlUzFz1atXfdW7VH18KjmZqWyHPhd3q6lTNqGffzmxizZRlwe7foOrdcq3FsPpHX+6XQrkJl11sjQbTOu76jObSn6/eQQiVXS7VJ14ZP3fzduLYdrhqrtQdfYfIF36pNGz7TfFyZ2jbht9HnRHMBcnvdDp2c1b2WbtrDGI9BzEfe+UWu0G+Vecuikki2TLB81G2GnJOok4vt4Y0nbSpQNda8PmIu8CbvlikNr5GPU+6fGeebRrtf8/vL5vf8lSgSvbqMKmVqFYY0tn1Jv8aPPevAa47nXt+Eozm49RkbvzxprVUXzWLtB/hoZCteRezevtHt322Eiq/fFh7aPVzLP7TDqXLeXq8EoNwNdgmvRWRsWb36xpavQycS7/9SeJ/syAyj8N4Fuimn5VnTudDJRrN0sXLXNwOz6peRFfKkMveJ/Kd+mP49bfJMd37Sc7MuR7+Pf27XfRIn95BcSVPbbxMdbVcR+GXwcZ91TfSiutv+8Z93/guMf+PcdAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/4ofOSYkVPMxp9cAAAAASUVORK5CYII=">
</div>
You need to use a PNG with a transparent background. otherwise you'll have a white background if you use a JPG.
How do I take a image with just white and transparent pixels (example) and recolor to, say, red or orange, using only CSS?
Question below was asked previously -
Change color of PNG image via CSS?
The answer says to use filters, but does not indicate what combination of filters would make it work. Are there any filter combinations that would allow me to change a white-on-transparent image to red?
To clarify: I would like to recolor the white portion of the image, not color the background. For example, I would like it red-on-transparent.
img {
-webkit-filter: brightness(50%) saturate(200%) hue-rotate(90deg);
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/600px-White_Globe_Icon.png"></img>
I played around a bit and found a possible solution to only paint the white parts:
img {
display: block;
background: black;
-webkit-filter: brightness(.5);
}
.recolor {
position: relative;
display: inline-block;
-webkit-filter: brightness(1) contrast(300%) invert(1);
}
.recolor:after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 255, 255, 0.3);
}
<figure class="recolor">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/200px-White_Globe_Icon.png">
</figure>
How it works:
Make image background black and set its brightness to a half, to make the foreground gray
Create a wrapper element (<figure>) and create an overlay (:after) of the inverted color you wish with a relatively low opacity
Now filter the wrapper element: make it so bright with such high contrast, that the background becomes black, but the foreground color remains.
Now just invert the wrapper to get your foreground color on white
Limits: Transparency gets lost, due to filtering the colors are maybe not exactly the colors you want, browser support is not optimal
Just give background color to image, For Example below.
Use this image
NOTE: Image is transparent
CSS
img{
background-color: red;
}
HTML
<img src="test.png">
It IS possible to "colorise" a white image using filters but the results are imperfect.
The first step is a sepia filter and then a hue-rotate.
A true "Red" may be harder to achieve but you can play with this further.
img {
max-height: 100vh;
width: auto;
-webkit-filter:
sepia(100%)
saturate(2000%)
hue-rotate(222deg);
}
body {
background: green;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/600px-White_Globe_Icon.png"></img>
I have the image in the correct folder but I want to add a text box on top of an image and I was told the best way to do it is make the image a background image, but when I followed a tutorial it never appeared?
anyway here is my html
<div class="module">
<h2>blah blah</h2>
</div>
and my CSS
.module {
margin: 10px;
width: 1530px;
height: 717px;
display:block;
background: url('C:\Users\Jason\Desktop\champions\images\shop.png');
background-size: cover;
position: relative;
}
h2 {
position: absolute;
bottom: 100px;
left: 100px;
background: rgba(0, 0, 0, 0.75);
padding: 4px 8px;
color: white;
margin: 0;
font: 14px PTSans;
}
the image is full width of the screen so I am using container-fluid in bootstrap and the text box will be in the middle of the image.
You may call the local file as background like this:
background: url("file://PATH-TO/file.jpg");
Keep in mind that the string inside parentheses should provide a URL to the file.
Also, you have the option to put a path in it.
background: url("PATH-TO/file.jpg");
Change the backlashes. From this...
background: url('C:\Users\Jason\Desktop\champions\images\shop.png');
To this
background: url('C:/Users/Jason/Desktop/champions/images/shop.png');
Cheers.
It looks fine of your css. Try to use firefox or chrome debugger to check if the background image can be loaded or not. Try to change the value of the background-size. Sometimes the background image is too large that you can only see part of it (which may be completely white) on the screen.
Your path is wrong
try this: url('images/shop.png') - if your css is in champions
How can I tint a background image that has transparent sections?
I have tried using background-blend-mode: multiply with background-image and background-color. It works great for opaque images, but does not take the transparency into account, leaving a colored square around the image.
I am using svg images, and could switch to using <img> instead of backgrounds if necessary.
Example:
Left side is my goal, right side is what I get with background-blend-mode: multiply. The base image is a light gray circle, and I multiplied it with red.
Edit: I created a codepen to better illustrate my problem and what I have tried. http://codepen.io/anon/pen/QbbbpZ It has both the original image and my goal (made in Photoshop) on top, with examples of what I have tried below.
Edit2: I'm beginning to wonder if it is even possible to do this with plain HTML/CSS. Would using something like canvas, maybe with shaders, be more appropriate? Is there a library out there for it?
In webkit (Safari, Chrome and Opera) you can use -webkit-mask-image to do the effect.
html:
<div id="blend-mask" class="uiElement uiBG"></div>
css:
#blend-mask {
-webkit-mask-image: url("http://i.imgur.com/JLjAor5.png");
background-color: #f00;
background-blend-mode: multiply;
}
#goal {
background-image: url("http://i.imgur.com/JLjAor5.png");
}
#pageBG {
width: 400px;
height: 400px;
background-image: url("http://lorempixel.com/g/400/200/");
background-color: rgba(255,0,0,0.25);
background-blend-mode: multiply;
color: white;
text-shadow: 0 0 0.25em black;
}
.uiElement {
width: 100px;
height: 100px;
margin: 25px;
display: inline-block;
}
.uiBG {
background-size: contain;
background-repeat: no-repeat;
background-image: url("http://i.imgur.com/rkRJbzH.png");
}
Example working:
http://codepen.io/anon/pen/vONVry
if you want to make it work as well in firefox check this post maybe will help:
Is there a -moz-mask CSS property, like -webkit-mask-image?
As well you can check using canvas to tint, there is this post that maybe can help:
http://www.playmycode.com/blog/2011/06/realtime-image-tinting-on-html5-canvas/
I have a number of headings and in the background of each I want to show the same gradient color, but a different (non-repeating) background image. I want to avoid duplicating any CSS rules for the background gradient color or background image position, because they will be the same for each heading. In other words, the only thing I should need to specify for an individual heading is the path to the background image file.
Here's what I have at the moment:
<h1 class="banner bgImage img1">background image 1</h1>
<h1 class="banner bgImage img2">background image 2</h1>
<h1 class="banner bgImage img3">background image 3</h1>
<h1 class="banner">heading without background image</h1>
.banner {
/* For old browsers that don't support gradients */
background-color: #9FCC1D;
/* browser-specific prefixes omitted */
background-image: linear-gradient(#75A319, #9FCC1D);
padding: 7px 7px 7px 15px;
}
/* Specifies position of background image */
.bgImage {
background-position: 5px 50%, 0 0;
background-repeat: no-repeat;
padding-left: 30px;
}
.img1 {
background-image: url(img1.png"), linear-gradient(#75A319, #9FCC1D);
}
.img2 {
background-image: url(img2.png"), linear-gradient(#75A319, #9FCC1D);
}
.img3 {
background-image: url(img3.png"), linear-gradient(#75A319, #9FCC1D);
}
There are a couple of problems with this
I have to repeat the linear-gradient style in each .imgX rule
It doesn't render correctly in Chrome, which doesn't seem to support a comma-separated list of background-image and background-repeat properties. This is what gets displayed in Chrome
How can I fix the problem with the way the background is rendered in Chrome while minimising duplication of CSS rules?
Use the :before pseudo-class for your background icons.
.img1:before {
content: '';
float: left;
position: relative;
background: transparent url('img1.png') left top no-repeat;
width: 16px; /* change to actual width of img */
height: 16px; /* change to actual height of img */
}
Or, since you're trying to relieve the amount of CSS, you can specify a class for the gradient and append that in your HTML.
Don, you have two classes which this background gradient can be applied to, bgImage and banner. Simply apply your gradient on to one of those classes and go from there. Also append repeat-x right after your image url to ensure it will repeat across.