css

问题 I'm trying to make a triangle in CSS that takes the whole width of the parent with a fixed height. I successfully did so with a linear-gradient like this: .triangle { width: 100%; height: 120px; background: linear-gradient(to right bottom, blue 50%, transparent 50%); } <div class="triangle"></div> But the diagonal doesn't look crisp. How could I do the same in CSS without using gradient? 回答1: You can blur the edge a bit .triangle { width: 100%; height: 120px; background: linear-gradient(to

问题 Im using Nuxt.js, and have a custom component. This component has css in the component that sets a background image using css. I've tried the following but I get an error when I run this. The error is: invalid expression: Invalid regular expression flags in Component <template> <section class="bg-img hero is-mobile header-image" v-bind:style="{ backgroundImage: 'url(' + image + ')' }"> <div class=""> <div class="hero-body"> <div class="container"> <h1 class="title"> {{ result }} </h1> <h2

问题 When was full support for numeric font-weight added to each browser? Specifically: IE, FireFox, Chrome, Safari, iOS Safari, Android Browser. I know all browsers support bold and normal , but I've been unable to find a up-to-date list of browsers that fully support numeric values for the CSS font-weight property. The only info I found was Font-weight is still broken. It shows most browsers at the time failing to render numeric weights correctly but it's from 2009 before IE8 was even released.

问题 This should be so simple, but I've been breaking my head over this for days. I'm trying to animate my page transitions. The problem is the docs SUCK. I've followed them over and over and tried every which way, but can't get it to work. What I want to do is slide my pages gracefully either right or left, and fade the one that is unmounting gracefully out behind it . Simple right? I am NOT using React Router for my pages. I've tried a variety of solutions for this, but the problem seems to be

问题 Hey there I am new to CSS grid. Have a look at the following example: .platform { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-gap: 20px; } .item { width:100%; background-color:#aaa; padding:10px; box-sizing:border-box; text-align:center; } .wrapmed { max-width:400px; } .wrapsmall { max-width:300px; } <div class="platform"> <div class="item">a</div> <div class="item">b</div> <div class="item">c</div> <div class="item">d</div> </div> <br/><br/> <div class=

问题 In order to fill the whole height of the page, I use height: 100%; for html and body tags, and it works fine until a browser would be closed and reopened. (I don't use 100vh because of issues on mobile devices https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html ) Steps to reproduce: Open https://angelika94.github.io/rick/ in Google Chrome on iPhone (you will see that navigation (Morty and Beer) is placed on the bottom

问题 In order to fill the whole height of the page, I use height: 100%; for html and body tags, and it works fine until a browser would be closed and reopened. (I don't use 100vh because of issues on mobile devices https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html ) Steps to reproduce: Open https://angelika94.github.io/rick/ in Google Chrome on iPhone (you will see that navigation (Morty and Beer) is placed on the bottom

问题 In order to fill the whole height of the page, I use height: 100%; for html and body tags, and it works fine until a browser would be closed and reopened. (I don't use 100vh because of issues on mobile devices https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html ) Steps to reproduce: Open https://angelika94.github.io/rick/ in Google Chrome on iPhone (you will see that navigation (Morty and Beer) is placed on the bottom

问题 I am using a div tag in code as shown below: <div class="col-sm-6 col-md-6 col-lg-4"> <img src="images/dummy_image.png" class="img-responsive"> </div> The user can upload any kind of image and have it displayed here. I want to fit the image inside of the div , meaning specifically that I need to cover the full div using that image as it's resized. I am using Bootstrap 3.3.7. Please advise. 回答1: Just add you images width to 100%. But as you are saying user will upload various kind of images,

问题 I am using a div tag in code as shown below: <div class="col-sm-6 col-md-6 col-lg-4"> <img src="images/dummy_image.png" class="img-responsive"> </div> The user can upload any kind of image and have it displayed here. I want to fit the image inside of the div , meaning specifically that I need to cover the full div using that image as it's resized. I am using Bootstrap 3.3.7. Please advise. 回答1: Just add you images width to 100%. But as you are saying user will upload various kind of images,