css3

问题 I am unsure of what I am doing wrong trying to get a transparent overlay to appear over an image on hover. Initially, I attempted a javascript approach, but that didn't work, so I figured I would try a more light-weight css approach. Does anyone see why this is not working? .section2-box { display: inline-block; width: 50%; height: 50%; border-bottom: 4px solid #FFF; border-right: 4px solid #FFF; box-sizing: border-box; position: relative; } .fadeHover { transition: all .35s ease; -webkit

问题 I have just found pure CSS soltution for stretching image like background-size:cover . It is used by Twitter but in a little bit other form. Here is an example (not mine) for stretching image http://jsfiddle.net/zksd1L6a/1/ In most cases it works just fine and I have no need to use Javascript to fit my image into div Here is code div { position: relative; background: yellow; overflow: hidden; } .parent1 { width: 500px; height: 200px; } .parent2 { width: 500px; height: 300px; } img { position:

问题 I have just found pure CSS soltution for stretching image like background-size:cover . It is used by Twitter but in a little bit other form. Here is an example (not mine) for stretching image http://jsfiddle.net/zksd1L6a/1/ In most cases it works just fine and I have no need to use Javascript to fit my image into div Here is code div { position: relative; background: yellow; overflow: hidden; } .parent1 { width: 500px; height: 200px; } .parent2 { width: 500px; height: 300px; } img { position:

问题 I want to create the following layout: where the blue block is an image and the red and green blocks contain vertically centered text. The container needs to have position:fixed , the image is sized dynamically so that its height is set to the height of the container and the red and green boxes are of equal height and fill the remainder of the container horizontally. I initially tried using divs: body { padding: 0; margin: 0; border: 0; } .container { height: 15vh; width: 100vw; position:

问题 I am used to using descendant space selectors and comma selectors. I have ids around larger sets of elements in order to manipulate them easier in jquery and css. So I tried something like this: #parent_id input, textarea { width: 100px; } So when I do this, my expectation is that this effect will occur on input AND textarea inside the #parent_id . Instead, this disqualifies parent_id and just selects all input , textarea . Why? And how can I avoid this, aside from making them separate. 回答1:

问题 I am trying to align some font element vertically in a list. I tried a bunch of thing such as playing with the vertical-align property and setting the same font-size / line-height. I saw an interesting answer here however it seems that the base line of the label is vertically align with the icon and not the whole text itself. ul { list-style : none } .list-item__content { padding: 10px; border: 1px solid black; } .icon { font-size: 14px; line-height: 14px; vertical-align: middle; } .label { /

问题 In my code below, when I add padding it should add to width since I am using border-box . But it is not working why? Can anyone help me. If I add some margin or padding my child__wrapper is pushed into new line why? * { box-sizing: border-box; margin: 0; padding: 0; } .wrapper { display: flex; flex-wrap: wrap; margin: 0; padding: 0; width: 100%; } .child__wrapper { height: 300px; flex: 0 0 33.3%; margin: 10px; box-sizing: border-box; background: rebeccapurple; } <div class="wrapper"> <div

问题 I've implemented some ::first-letter styles for my p elements. However, when I add display: inline-flex to make them inline, all the ::first-letter styles stop working. How can I make the elements inline while keeping the ::first-letter styles? p:first-of-type::first-letter { font-size: 25px; font-weight: bold; } p:nth-of-type(2)::first-letter { font-size: 25px; font-weight: bold; } p:nth-of-type(3)::first-letter { font-size: 25px; font-weight: bold; } /* inline container */ p { display:

问题 *{ margin:0; padding: 0; } body { background-color: orangered; } .content { margin-top: 200px; height: 100vh; background-color: #fdfdff; } .tilt { position: relative; } .tilt:before { content: ''; padding-top: 8.74887%; position: absolute; left: 0; right: 0; bottom: 100%; background-image: linear-gradient(5deg, #fdfdff calc(50% - 1px), transparent 50%); } <div class="content tilt"> </div> It seems that IE11 has some problems understanting calc() css property. I am using calc with linear

问题 I am trying to use flexbox to align my icon to the left of a button view and the text to the center. Currently they are both aligned to the center but I am not sure how to get my icon on the very left edge of the button while keeping the text centered in the view Right now my button looks like this: I am using https://github.com/APSL/react-native-button for buttons and https://github.com/oblador/react-native-vector-icons for icons Below is some of my code: <Button style={signupStyles