css

问题 So I am designing a website right now (pretty nooby at HTML and CSS) but I made a design on Photoshop beforehand so that I could go right through the coding and make the website how I wanted. Well I have an issue. I have two DIV elements inside of a bigger container DIV that won't line up side-by-side, despite using inline-block. Here is the css code: .contentContainer { display: block; width: 700px; height: 250px; margin: 20px auto; } .topContainer { height: 230px; padding: 10px; background

问题 In CSS3, animations were introduced under the various vendor prefixes, with the transition properties. Now, at-least in pure CSS there are two ways to make an element change position. Setting the element's position as absolute and fiddle with left: right: top: and bottom: Using -vendor-transform:translate(X,Y,Z) Now, strictly on the point of transform:translate() , aside from one's ability to use translateZ() , the only difference between them is that the latter is not a reported value; other

问题 In CSS3, animations were introduced under the various vendor prefixes, with the transition properties. Now, at-least in pure CSS there are two ways to make an element change position. Setting the element's position as absolute and fiddle with left: right: top: and bottom: Using -vendor-transform:translate(X,Y,Z) Now, strictly on the point of transform:translate() , aside from one's ability to use translateZ() , the only difference between them is that the latter is not a reported value; other

问题 Is it possible, with only CSS, to style an HTML label dependent on its input's state? In my case, I want to style an <input type="checkbox"> based on whether it's checked. I tried putting the label inside the input, but Firefox and Chrome (at least) seems to parse them as siblings, even though they're clearly nested in the input source. And I don't know how to write a CSS rule that can indirect through a for= attribute. Do I need to whip out the Javascript on this one? 回答1: They don't need to

问题 I'm trying to make an image gallery that uses CSS animations, but I'm having some weird effects come up. I have a smaller thumbnail image to start, and I want it to scale to twice the size when I hover over it. That part works, but it also makes it move to the left, and it ends up going over the edge of the screen. What should I do to fix it? <style> .zoom { transition:1s ease-in-out; } .zoom:hover { transform:scale(2); } </style> <div class="content"> <div class="zoom"> <img alt="Paperplane"

问题 I'm trying to make an image gallery that uses CSS animations, but I'm having some weird effects come up. I have a smaller thumbnail image to start, and I want it to scale to twice the size when I hover over it. That part works, but it also makes it move to the left, and it ends up going over the edge of the screen. What should I do to fix it? <style> .zoom { transition:1s ease-in-out; } .zoom:hover { transform:scale(2); } </style> <div class="content"> <div class="zoom"> <img alt="Paperplane"

问题 I have a div generated by a CMS which includes a background image which I'd like to change the opacity of without effecting the opacity of the div's child elements. https://jsfiddle.net/L5b81yqo/ HTML <div class="container"> <p>Some dummy text</p> </div> CSS .container { background: url(https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg); width: 100%; height: 500px; background-size: cover; } Is it possible with CSS to change the opacity of the background image without using

问题 I have a div generated by a CMS which includes a background image which I'd like to change the opacity of without effecting the opacity of the div's child elements. https://jsfiddle.net/L5b81yqo/ HTML <div class="container"> <p>Some dummy text</p> </div> CSS .container { background: url(https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg); width: 100%; height: 500px; background-size: cover; } Is it possible with CSS to change the opacity of the background image without using

问题 I have the following code: for($i=0; $i<count($gallery);$i++) { $temp = array(); $temp = $gallery[$i]; echo "<img src='". $temp->path . "' />"; } Now this code prints the content in one row. I want to print only 3 per row and then create new row and print another 3 and so on. How can this be done? appreciate the support :) EDIT: error A PHP Error was encountered Severity: Notice Message: Undefined offset: 5 Filename: views/profile.php Line Number: 105 A PHP Error was encountered Severity:

问题 Working on a CSS Grid example that contains several photo cards (items). Let's imagine that these items are created dynamically by any server-side logic. The last item in the grid container is a div element defined as a footer for that grid, which also contains a button that has to be center-aligned inside its parent. By the grid definition, the footer takes the height of the implicit row: 200px. The footer element spans the 2 columns of the grid. How can the footer, being in the last