반응형

CSS 17

컨테이너에서 배경 이미지를 회전하는 방법은 무엇입니까?

컨테이너에서 배경 이미지를 회전하는 방법은 무엇입니까? 크롬에 있는 스크롤 바의 버튼에 있는 이미지를 회전하고 싶습니다.이제 다음 내용이 포함된 CSS가 있습니다. ::-webkit-scrollbar-button:vertical:decrement { background-image: url(images/arrowup.png); -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); background-repeat: no-repeat; background-position: center; background-color: #ECEEEF; border-color: #999; } 저는 이미지 내용물을 회전시키지 않고 회전하고 싶습니다.아주 잘했고 여기..

source 2023.10.21

float:left; vs display:loat; vs display:loat-block; vs display:table-cell;

float:left; vs display:loat; vs display:loat-block; vs display:table-cell; 내 질문(들) 전문 웹 디자이너가 선호하는 방법이 있습니까? 웹사이트를 그릴 때 웹브라우저가 선호하는 방법이 있습니까? 이게 다 개인적인 취향인가요? 제가 놓친 다른 기술이 있습니까? 참고: 위의 질문은 다중 칼럼 레이아웃 설계와 관련된 것입니다. float:왼쪽; http://jsfiddle.net/CDe6a/ 이것은 제가 항상 컬럼 레이아웃을 만들 때 사용하는 방법이며, 잘 작동하는 것 같습니다. 것은이므로, 만 하면 .clear:both;그 후에방금 발견한 또 다른 사기는 텍스트를 세로로 정렬할 수 없다는 것이었습니다. 표시:표시:표시; 이렇게 하면 무너지는 부모의 ..

source 2023.09.06

CSS를 사용하여 입력에 텍스트가 있는지 탐지합니다. -- 내가 방문 중이고 제어하지 않는 페이지에서?

CSS를 사용하여 입력에 텍스트가 있는지 탐지합니다. -- 내가 방문 중이고 제어하지 않는 페이지에서? CSS를 통해 입력에 텍스트가 있는지 여부를 감지할 수 있는 방법이 있습니까?저는 그것을 사용해 보았습니다.:empty사이비 클래스, 그리고 저는 사용해 보았습니다.[value=""]둘 다 효과가 없었습니다.저는 이것에 대한 단 하나의 해결책을 찾을 수 없을 것 같습니다. 저는 이것이 가능해야 한다고 생각합니다, 우리가 사이비 클래스가 있다는 것을 고려할 때.:checked,그리고.:indeterminate둘 다 비슷한 것 같아요 참고:저는 자바스크립트를 활용할 수 없는 "스타일리쉬" 스타일을 위해 이것을 하고 있습니다. 또한 사용자가 제어할 수 없는 페이지에서 클라이언트 측 스타일이 사용됩니다.당신은..

source 2023.09.01

배경 이미지로 제공될 때 SVG 이미지의 채우기 색상을 수정하는 방법은 무엇입니까?

배경 이미지로 제공될 때 SVG 이미지의 채우기 색상을 수정하는 방법은 무엇입니까? SVG 출력을 페이지 코드와 직접 연결하여 CSS로 채우기 색을 간단하게 수정할 수 있습니다. polygon.mystar { fill: blue; }​ circle.mycircle { fill: green; } 이것은 잘 작동하지만 배경 이미지로 제공될 때 SVG의 "채우기" 특성을 수정하는 방법을 찾고 있습니다. html { background-image: url(../img/bg.svg); } 지금 어떻게 색을 바꿀 수 있습니까?그게 가능할까요? 참고로 제 외부 SVG 파일의 내용은 다음과 같습니다. CSS 마스크를 사용할 수 있습니다. '마스크' 속성을 사용하여 요소에 적용되는 마스크를 만듭니다. .icon { ba..

source 2023.08.27

어떻게 하면 CSS로 전체 웹 페이지를 확장할 수 있습니까?

어떻게 하면 CSS로 전체 웹 페이지를 확장할 수 있습니까? Firefox를 사용하면 를 +누르기만 하면 전체 웹 페이지를 확대할 수 있습니다.이렇게 하면 전체 웹 페이지(글꼴, 이미지 등)를 비례적으로 확장할 수 있습니다. 어떻게 하면 간단한 CSS를 사용하여 동일한 기능을 복제할 수 있습니까? 그런 것이 있습니까?page-size: 150%(전체 페이지 부분이 x% 증가합니까?)당신은 CSS를 사용할 수 있을지도 모릅니다.zoom속성 - IE 5.5+, Opera, Safari 4 및 Chrome에서 지원됩니다. 사용할 수 있나요: css Zoom Firefox는 Zoom(bugzilla 항목)을 지원하지 않는 유일한 주요 브라우저이지만 Firefox 3.5에서 "전용" -moz-transform 속..

source 2023.08.22

기본 HTML/CSS 링크 색상은 무엇입니까?

기본 HTML/CSS 링크 색상은 무엇입니까? , 를예현면▁▁code처럼 코드 표현이 합니다.#FFFFFF.HTML5에서 하이퍼링크의 전경색은 무엇보다도 예상되는 기본 렌더링 동작에 대한 지침의 형태로 표준화를 위한 궤도에 올라 있습니다.특히 내용 표현 섹션에서 비방문 및 방문 하이퍼링크에 권장되는 기본 색상은 다음과 같습니다. :link { color: #0000EE; } :visited { color: #551A8B; } (기본값은 다음과 같습니다).:link:active, :visited:active.), 그나러나. 이러한 기본 색상을 사용할 수 있으며 제대로 작동할 것으로 예상할 수 있습니다.그러나 브라우저는 이러한 지침을 따를 필요가 없으므로 이러한 지침의 일부 또는 전부를 자유롭게 무시할 수 ..

source 2023.08.22

CSS에서 div 배경색을 투명하게 만드는 방법

CSS에서 div 배경색을 투명하게 만드는 방법 저는 CSS3를 사용하지 않습니다.그래서 사용할 수 없습니다.opacity또는filter특성.이러한 속성을 사용하지 않고 어떻게 하면 다음을 만들 수 있습니까?background-color의 투명한.div이 링크에 있는 텍스트 상자의 예입니다.여기서 텍스트 상자 배경색은 투명합니다.저는 위에서 언급한 속성을 사용하지 않고 동일하게 만들고 싶습니다.문제는opacity이는 콘텐츠에도 영향을 미치지만 이러한 현상이 발생하지 않으려는 경우가 많습니다. 요소를 투명하게 유지하려면 다음과 같이 간단합니다. background-color: transparent; 그러나 색상으로 표시하려면 다음을 사용할 수 있습니다. background-color: rgba(255, 0..

source 2023.08.17

for 자:자동 for 자:자동 for 자:자동

for 자:자동 초보 CSS 질문.내 생각에는 말이지…width:auto당분간display:block요소는 '사용 가능한 공간 채우기'를 의미합니다. 하만당은간분의 .요소 이것은 사실이 아닌 것 같습니다.예: 그러면 두 가지 질문이 있습니다. 정확히 무엇에 대한 정의가 있습니까?width:auto무슨 뜻입니까?CSS 스펙이 애매하게 보이는데, 아마 관련 부분을 놓친 것 같습니다. 다른 블록 레벨 요소처럼 사용 가능한 공간을 채우는 입력 필드에 대한 예상 동작을 달성할 수 있는 방법이 있습니까? 감사합니다!안 안는 의너는 에생니다성됩에서 size기여하다.기본값size자동차 폭을 넓히는 이유입니다. 시도해 볼 수 있습니다.width:100%아래의 예에서 설명한 바와 같이. 너비를 채우지 않음: 채우기 너비:..

source 2023.08.17

유연한 항목을 올바르게 띄우기

유연한 항목을 올바르게 띄우기 나는 있습니다 Ignore parent? another child 부모님이 가지고 계신 .parent { display: flex; } 첫째 아이의 경우, 저는 물건을 오른쪽으로 띄우기만 하면 됩니다. 그리고 부모님이 정해준 유연한 규칙을 따르는 나의 다른 div들. 이것이 가능한 일입니까? 그렇지 않은 경우 어떻게 해야 합니까?float: right휘어진 상태에서?사용할 수 없습니다.float플렉스 컨테이너 내부 및 그 이유는 float 속성이 여기에서 보는 것처럼 플렉스 레벨 박스에 적용되지 않기 때문입니다. 그래서 당신이 위치를 정하고 싶다면,child의 오른쪽 요소.parent사용할 수 있는 요소margin-left: auto그러나 지금.child요소는 다른 요소도 ..

source 2023.08.17

텍스트 표시: 줄임표가 작동하지 않습니다.

텍스트 표시: 줄임표가 작동하지 않습니다. 이것이 제가 시도한 것입니다(여기 참조). body { overflow: hidden; } span { border: solid 2px blue; white-space: nowrap; text-overflow: ellipsis; } 기본적으로 창문을 작게 만들 때 경간이 타원형으로 줄어들었으면 합니다.제가 무엇을 잘못했나요?당신은 CSS가 필요합니다.overflow,width(또는)max-width),display,그리고.white-space. http://jsfiddle.net/HerrSerker/kaJ3L/1/ span { border: solid 2px blue; white-space: nowrap; text-overflow: ellipsis; width:..

source 2023.08.12
반응형