css

问题 How to show this Dialog Popup one time per session, I see cookies configuration but I could not apply it to this case: $(document).ready(function() { ShowDialog(true); e.preventDefault(); }); $("#btnClose").click(function(e) { HideDialog(); e.preventDefault(); }); function ShowDialog(modal) { $("#overlay").show(); $("#dialog").fadeIn(300); if (modal) { $("#overlay").unbind("click"); } else { $("#overlay").click(function(e) { HideDialog(); }); } } function HideDialog() { $("#overlay").hide();

问题 I have an image and a text in front of it. the problem is, I cant align text and image, text is always in the bottom and I want it in the middle-front of image. here is the problem: .imgf{ width:45px; } .textf{ margin-left:2px; } <img src=https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Nuvola_wikipedia_icon.png/240px-Nuvola_wikipedia_icon.png class=imgf> <span class=textf>comments(20)</span> 回答1: All you need to do is to add vertical-align: middle; to the style of .imgf .imgf {

问题 I have an image and a text in front of it. the problem is, I cant align text and image, text is always in the bottom and I want it in the middle-front of image. here is the problem: .imgf{ width:45px; } .textf{ margin-left:2px; } <img src=https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Nuvola_wikipedia_icon.png/240px-Nuvola_wikipedia_icon.png class=imgf> <span class=textf>comments(20)</span> 回答1: All you need to do is to add vertical-align: middle; to the style of .imgf .imgf {

问题 I'm creating simple css animation of text sliding to the page from right. I'm using jQuery to trigger animation by adding a class to element. But the start position must be outside viewport and that triggers bottom scrollbar to appear. How to prevent that? This is relevant css fragment h2{ position:absolute; right:-500px; top:190px; font-size:45px; .transition(3s, linear); } h2.centered{ top:88px; left:30%; } 回答1: Is this what you are looking for? I'm guessing you are triggering the change in

问题 I have a few selector classes eg .rt-grid-6 { ... } .largemargintop { ... } .rt-left { ... } I have to use them in couple of elements in my html sample <div class="rt-grid-6 largemargintop rt-left"> ... </div> <div class="rt-grid-6 largemargintop rt-left"> ... </div> ... so this is being repeated and difficult to manage, if I have to add or remove a class then I have to update all the occurrences so I was thinking if the below mentioned css is possible in some way .item { rt-grid-6; //refer

问题 I'm creating simple css animation of text sliding to the page from right. I'm using jQuery to trigger animation by adding a class to element. But the start position must be outside viewport and that triggers bottom scrollbar to appear. How to prevent that? This is relevant css fragment h2{ position:absolute; right:-500px; top:190px; font-size:45px; .transition(3s, linear); } h2.centered{ top:88px; left:30%; } 回答1: Is this what you are looking for? I'm guessing you are triggering the change in

问题 Is it possible to set image in same shape with clip-path css. Original Image Expected image with css 回答1: You don't really need clip-path or mask. A skew transformation with border-radius can do it: .box { margin:50px; border-radius:80px 0; height:300px; background:red; position:relative; background:url(https://i.stack.imgur.com/rYeuk.jpg) center/cover; transform:skewY(-7deg); transform-origin:right; overflow:hidden; } .box::before { content:""; position:absolute; background:inherit; top:-20%

问题 Is it possible to set image in same shape with clip-path css. Original Image Expected image with css 回答1: You don't really need clip-path or mask. A skew transformation with border-radius can do it: .box { margin:50px; border-radius:80px 0; height:300px; background:red; position:relative; background:url(https://i.stack.imgur.com/rYeuk.jpg) center/cover; transform:skewY(-7deg); transform-origin:right; overflow:hidden; } .box::before { content:""; position:absolute; background:inherit; top:-20%

问题 I am attempting to make a div with 2 background colors, and I am aware that you can do the 50/50 gradient, but when you go more extreme, say, 20/80, the colors start to blend. I have looked at this link 50%/50% hard gradient but, again, when I attempt to change the values to higher and lower, it starts to blend. Any suggestions? Thanks. Here is where I am trying to implement it: http://codepen.io/jettc/pen/zrOKqJ percent = Math.floor((time/timerTotal)*100); remainPercent = 100-percent;

问题 I'm trying to make an image clickable so that I can use it as a button to download a PDF although I feel like I'm over-thinking this and confusing myself. An example of the code I've used: <div id="name"><a href="file.pdf"></a></div> The div id is then used with CSS to display the image as I also wanted a hover effect so the user has some sort of feedback when on the button. #name { background-image: url('standardimage.jpg'); height: 51px; width: 285px; margin: auto; margin-bottom: 5px; }