웹 프론트엔드 HTML 튜토리얼 一秒提高格调!帮你快速生成网页毛玻璃背景的酷站(附CSS代码)_html/css_WEB-ITnose

一秒提高格调!帮你快速生成网页毛玻璃背景的酷站(附CSS代码)_html/css_WEB-ITnose

Jun 24, 2016 am 11:27 AM

近年网站设计多半直接用 CSS 来设定颜色,有些则会使用模糊 背景 效果,我猜这可能从 Windows Vista 之后的毛玻璃特效(Windows Aero)有关,无论如何,现在你可以使用今天这个在线工具轻松做出模糊 背景 效果,然后加到你的网站项目中。

Unique Gradient Generator 是一个独特的渐变 背景 产生器,跟一般 CSS 渐层背景语法功能不同,透过这项服务可以从网站提供的免费图库来挑照片,或是自己上传,选择要模糊显示范围。因为是放大显示,仅会提取图片上非常小的区域,将它扩展到 100% 大小,利用浏览器图片平滑算法来产生最佳效果。

另一大特色是:Unique Gradient Generator 不会产生冗长的 CSS 程序代码!网站生成的原始码非常精简,使用 base64 编码,只有几 bytes 大小。如果你是网站开发者,想要一个简单又不会过于单调的背景图,这是不可多得的好工具。

Unique Gradient Generator

STEP 1

开启 Unique Gradient Generator 网站后,网站背景就是使用这项服务产生,应该能了解它能产生什么样式的背景图,其实还蛮好看的,简简单单。

STEP 2

点选下方的「Browse Image」来浏览网站提供的图库,点选即可选择使用,或者你也可以自己上传图片。要记住的是 Unique Gradient Generator 只会选择图片里的小范围,然后放大显示,重要的是找到你所需的背景「色系」而不是图案。

STEP 3

主要设定工具在右上角「Controls」,可调整要取用的图片范围、区域大小。如果你没有特别想要那个范围,可以点选「Randomize」随机显示,看看是不是喜欢的背景图案。

你还能使用键盘上的「箭头键」来移动背景范围,「R」键可随机产生。

STEP 4

最后,点选底下的「Generate CSS」来产生对应的 CSS 原始码。

如前面所述,Unique Gradient Generator 产生的 CSS 代码会利用 base64 编码,只有使用到两种 CSS 属性,在套用上非常简单!效果也很不错!

【优设酷站22连发!】

  1. 免费图库+导航收集站: 《酷站两连发!高品质免费图库站+专注WEB/APP导航收集站》
  2. 音乐站+字体搜索: 《酷站两连发!帮你专心工作的音乐站+谷歌字体在线搜索神器》
  3. 渐变色+代码比较: 《酷站两连发!渐变色方案全聚合网站+在线代码比较神器》
  4. 配色+占位图: 《酷站两连发!在线色彩搭配工具+快速生成占位图片器》
  5. LOGO下载+字体下载: 《酷站两连发!可商用的矢量LOGO下载+平面最爱的27款免费字体》
  6. 压缩图片+在线配色: 《酷站两连发!在线图片压缩神器+在线配色工具COLOURCO》
  7. CSS Hover动画+宠物小精灵配色: 《酷站两连发!宠物小精灵专属配色网站+CSS HOVER动画收集站》
  8. 美女图片+游戏配色: 《酷站两连发!游戏配色网站+免费美女素材特供网站》
  9. 在线配色+字体推荐: 《酷站两连发!在线配色神器+英文字体推荐网站》
  10. 追波作品变代码+16进制颜色: 《酷站两连发!用代码呈现DRIBBBLE作品+16进制颜色网站》
  11. 无缝纹理+多边形背景: 《酷站两连发!专注无缝纹理素材站+多边形背景生成器》

原文地址: free.com.tw

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

HTML은 초보자를 위해 쉽게 배우나요? HTML은 초보자를 위해 쉽게 배우나요? Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서 HTML, CSS 및 JavaScript 이해 : 초보자 안내서 Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

HTML의 시작 태그의 예는 무엇입니까? HTML의 시작 태그의 예는 무엇입니까? Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류? Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류? Apr 04, 2025 pm 11:54 PM

GiteEpages 정적 웹 사이트 배포 실패 : 404 오류 문제 해결 및 해결시 Gitee ...

CSS3 및 JavaScript를 사용하여 클릭 후 주변 사진을 흩어지고 확대하는 효과를 얻는 방법은 무엇입니까? CSS3 및 JavaScript를 사용하여 클릭 후 주변 사진을 흩어지고 확대하는 효과를 얻는 방법은 무엇입니까? Apr 05, 2025 am 06:15 AM

이미지를 클릭 한 후 주변 이미지를 산란 및 확대하는 효과를 얻으려면 많은 웹 디자인이 대화식 효과를 달성해야합니다. 특정 이미지를 클릭하여 주변을 만들 수 있습니다 ...

웹 주석에서 y 축 위치의 적응 형 레이아웃을 구현하는 방법은 무엇입니까? 웹 주석에서 y 축 위치의 적응 형 레이아웃을 구현하는 방법은 무엇입니까? Apr 04, 2025 pm 11:30 PM

웹 주석 기능에 대한 Y 축 위치 적응 알고리즘이 기사는 Word 문서와 유사한 주석 기능을 구현하는 방법, 특히 주석 간격을 다루는 방법을 모색합니다 ...

HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구 HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구 Apr 09, 2025 am 12:12 AM

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.

See all articles