My question is concerning the pause Raster to PNG
I converted the play raster to png, and that went through smoothly without an issue.
I do the pause one next and they both don’t look the same.
How do I fix that? And can it be fixed?
Can something be adjusted in the code to fix/address the issue?
<div style="
width: 36px;
height: 36px;
background-color: rgba(0,0,0,.7);
background-image: url('https://i.imgur.com/DP1EiiG.png');
background-repeat: no-repeat;
background-size: 14px 18px;
background-position: 50%;
border-radius: 500px;
border: 1px solid red;
cursor: pointer;
"> </div>
<div style="
width: 36px;
height: 36px;
background-color: rgba(0,0,0,.7);
background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTI2MCAxNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0yNTIgMEgxMjZDOTEuMyAwIDYxLjcgMTIuMyAzNyAzNyAxMi4zIDYxLjcgMCA5MS4zIDAgMTI2djEyNjBjMCAzNC43IDEyLjMgNjQuMyAzNyA4OSAyNC43IDI0LjcgNTQuMyAzNyA4OSAzN2gxMjZjMzQuNyAwIDY0LjMtMTIuMyA4OS0zNyAyNC43LTI0LjcgMzctNTQuMyAzNy04OVYxMjZjMC0zNC43LTEyLjMtNjQuMy0zNy04OS0yNC43LTI0LjctNTQuMy0zNy04OS0zN3ptODgyIDBoLTEyNmMtMzQuNyAwLTY0LjMgMTIuMy04OSAzNy0yNC43IDI0LjctMzcgNTQuMy0zNyA4OXYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6IiBmaWxsPSIjZmZmIi8+PC9zdmc+');
background-repeat: no-repeat;
background-size: 14px 18px;
background-position: 50%;
border-radius: 500px;
border: 1px solid red;
cursor: pointer;
"> </div>
<div style="
width: 36px;
height: 36px;
background-color: rgba(0,0,0,.7);
background-image: url('https://i.imgur.com/ef35w1e.png');
background-repeat: no-repeat;
background-size: 14px 18px;
background-position: 58% 50%;
border-radius: 500px;
border: 1px solid red;
cursor: pointer;
"> </div>
<div style="
width: 36px;
height: 36px;
background-color: rgba(0,0,0,.7);
background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTIyNiAxNDgxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=');
background-repeat: no-repeat;
background-size: 14px 18px;
background-position: 58% 50%;
border-radius: 500px;
border: 1px solid red;
cursor: pointer;
"> </div>
ronpat
October 20, 2017, 2:31pm
2
I’m sorry, but I don’t understand what you are talking about:
There is probably another meaning…?
In computer graphics and digital photography, a raster graphic represents a two-dimensional picture as a rectangular matrix or grid of pixels, viewable via a computer display, paper, or other display medium. A raster image is technically characterized by the width and height of the image in pixels and by the number of bits per pixel. Raster images are stored in image files with varying dissemination, production, generation, and acquisition formats.
The printing and prepress industries know raste...
However, I’m also confused, because PNG is a raster file format, so I don’t understand what’s being converted here (or why).
Portable Network Graphics (PNG, officially pronounced /pɪŋ/ PING, colloquially pronounced /ˌpiːɛnˈdʒiː/ PEE-en-JEE) is a raster-graphics file format that supports lossless data compression. PNG was developed as an improved, non-patented replacement for Graphics Interchange Format (GIF)—unofficially, the initials PNG stood for the recursive acronym "PNG's not GIF".
PNG supports palette-based images (with palettes of 24-bit RGB or 32-bit RGBA colors), grayscale images (with or without an alpha...
2 Likes
So you don’t like the difference between the 2 pause buttons? One has narrow bars and the other has wide, well-spaced bars?
Converting Base64 String to .SVG
Perfect.
The mistake I made was, I used internet explorer to convert an svg path to a png image. Wrong thing to do. I was supposed to convert the Base64 string, not the svg path.
This was the correct way.
I put the string in here
Save as .svg
Then upload to here:
This is one way I just found.
Anyone know of any others?
<style>
#playButton2 {
width: 78px;
height: 78px;
cursor: pointer;
border: 1px solid #0059dd;
background-color: black;
background-image: url('https://i.imgur.com/ltrxz9z.jpg');
background-repeat: no-repeat;
background-size: cover;
}
#playButton2 div:hover {
border-radius: 50%;
border: 1px solid red;
}
.initial {
width: 36px;
height: 36px;
margin: 20px 20px;
background-color: rgba(0, 0, 0, .7);
background-image: url('https://i.imgur.com/Z6NjnxX.png');
background-size: 14px 18px;
background-repeat: no-repeat;
background-position: 58% 45%;
border-radius: 50%;
border: 1px solid white;
cursor: pointer;
}
.pause {
display: none;
width: 36px;
height: 36px;
margin: 20px 20px;
background-color: rgba(0, 0, 0, .7);
background-image: url('https://i.imgur.com/rzG5iBH.png');
background-repeat: no-repeat;
background-size: 14px 18px;
background-position: 50%;
border-radius: 500px;
border: 1px solid white;
cursor: pointer;
}
.play {
display: none;
width: 36px;
height: 36px;
margin: 20px 20px;
background-color: rgba(0, 0, 0, .7);
background-image: url('https://i.imgur.com/Z6NjnxX.png');
background-size: 14px 18px;
background-repeat: no-repeat;
background-position: 58% 45%;
border-radius: 50%;
border: 1px solid white;
cursor: pointer;
}
</style>
<div id="playButton2" onclick="
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
document.querySelector('#playButton2 .initial').style.display='none';
document.querySelector('#playButton2 .pause').style.display='none';
document.querySelector('#playButton2 .play').style.display='none';
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton2 .pause').style.display='inline-block';
player.play();
} else {
document.querySelector('#playButton2 .play').style.display='inline-block';
player.pause();
}">
<div class="initial"> </div>
<div class="pause"> </div>
<div class="play"> </div>
</div>
<audio id="player2" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
1 Like
system
Closed
January 20, 2018, 1:02pm
7
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.